<html data-inboxsdk-session-id="1548745752814-0.10924027289927207">

<head>
  <meta charset="utf-8">
  <meta name="Keywords" content="极客时间,极客邦,极客邦科技,极客邦控股,极客时间App,专栏订阅,极客新闻,二叉树,极客Live,QCon,左耳听风,AI技术内参,大航海时代,陈皓,徐飞,洪亮劼,霍泰稳,池建强,Selina,Gary,InfoQ,极客搜索">
  <meta name="description" content="极客时间是极客邦科技出品的一款 IT 内容知识服务 App，内容包含专栏订阅、极客新闻、热点专题、直播、视频和音频等多形式的知识内容，并设有陈皓专栏、徐飞专栏、洪亮劼专栏等专栏供订阅。">
  <link rel="apple-touch-icon" sizes="180x180" href="//static001.geekbang.org/static/icon/time/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="//static001.geekbang.org/static/icon/time/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="//static001.geekbang.org/static/icon/time/favicon-16x16.png">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="format-detection" content="telephone=no">
  <title>极客时间 | 03 | HTML语义：div和span不是够用了吗？</title>
  <link href="https://static001.geekbang.org/static/time/css/app.e45c64b9ab6b07d38d191bdcfd4704ca.css" rel="stylesheet">
  <style type="text/css">
    .hljs-ln {
      border-collapse: collapse
    }

    .hljs-ln td {
      padding: 0
    }

    .hljs-ln-n:before {
      content: attr(data-line-number)
    }
  </style>
  <style type="text/css">
    .d4s24Cak_0 {
      background: #000
    }

    ._2XuSxNZp_0 {
      opacity: .01
    }

    .Wc3vzb2A_0 {
      opacity: 1
    }

    ._2iHgUKTE_0 {
      max-width: 46.25rem;
      min-height: 100vh;
      margin: 0 auto;
      background: #fff;
      -webkit-transition: background-color .3s ease;
      transition: background-color .3s ease
    }

    ._2iHgUKTE_0 ._2Q4AqmzS_0 {
      color: #888
    }

    ._2iHgUKTE_0 ._2Q4AqmzS_0,
    ._2iHgUKTE_0 ._24aDcC1__0 {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      height: 35px;
      display: inline-block;
      font-size: 15px;
      text-align: center;
      line-height: 36px
    }

    ._2iHgUKTE_0 ._24aDcC1__0 {
      color: #fff;
      background-color: #fa8919;
      font-weight: 500
    }

    ._2iHgUKTE_0 ._2_jLRfDz_0 {
      padding-left: 22px;
      padding-right: 22px
    }

    ._2iHgUKTE_0 ._3h_65ACq_0 {
      color: #fa8919;
      font-size: 15px;
      font-weight: 600;
      line-height: 24px;
      border-radius: 5px;
      padding: 12px;
      background-color: #f6f7fb;
      margin-top: 20px
    }

    ._2iHgUKTE_0 ._3h_65ACq_0 ._1_J2p49N_0 {
      font-size: 12px
    }

    ._2iHgUKTE_0 .yXXuK9Bz_0 {
      padding: 12px 0 20px;
      padding-bottom: 52px
    }

    ._2iHgUKTE_0 ._3QuafcgX_0 {
      color: #353535;
      font-weight: 700;
      line-height: 30px;
      font-size: 22px
    }

    ._2iHgUKTE_0 ._2dsK9OZI_0 {
      color: #999;
      font-size: 14px;
      font-weight: 500;
      margin-top: 5px
    }

    ._2iHgUKTE_0 ._1dC78n85_0 {
      margin-top: 10px
    }

    ._2iHgUKTE_0 ._1dC78n85_0.PlJBpIgH_0 video-webkit-media-controls-fullscreen-button {
      display: none
    }

    ._2iHgUKTE_0 ._1hOtWUmw_0 {
      border-radius: 6px;
      vertical-align: top;
      width: 100%
    }

    ._2iHgUKTE_0 ._2qqGfSEe_0 {
      margin-top: 24px
    }

    ._2iHgUKTE_0 ._1fMbLOUg_0 {
      color: #b2b2b2;
      padding-bottom: 20px;
      margin-top: 20px;
      font-size: 13px;
      font-weight: 400
    }

    ._2iHgUKTE_0 .JDGVVLCG_0 {
      width: 100%;
      margin: 20px 0
    }

    ._2iHgUKTE_0 ._2xLk5jLr_0 {
      overflow: hidden;
      padding-top: 10px;
      margin-bottom: -30px
    }

    ._2iHgUKTE_0 ._2xLk5jLr_0 a._24aDcC1__0 {
      float: right;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      padding: 4px 8px;
      cursor: pointer
    }

    ._2iHgUKTE_0 .DU0gW1Le_0 {
      padding-top: 32px;
      border-top: 10px solid #f6f7fb;
      -webkit-transition: border-top .3s ease;
      transition: border-top .3s ease;
      position: relative
    }

    ._2iHgUKTE_0 .DU0gW1Le_0 h2 {
      color: #353535;
      position: relative;
      z-index: 1;
      margin-bottom: 1rem;
      font-weight: 700;
      font-size: 19px
    }

    ._2iHgUKTE_0 ._3XC20_-x_0 {
      position: absolute;
      z-index: 2;
      background: #fa8919;
      font-size: 13px;
      color: #fff;
      text-align: center;
      height: 28px;
      width: 80px;
      line-height: 28px;
      -webkit-box-shadow: 4px 5px 20px 1px rgba(250, 137, 25, .24);
      box-shadow: 4px 5px 20px 1px rgba(250, 137, 25, .24);
      border-radius: 28px;
      right: 22px;
      top: 32px
    }

    ._2iHgUKTE_0 ._3qEE98dE_0 {
      z-index: 10;
      cursor: pointer
    }

    ._2iHgUKTE_0 ._3PNMKN7j_0 {
      cursor: pointer;
      padding-top: 24px;
      padding-bottom: 24px;
      position: relative
    }

    ._2iHgUKTE_0 ._3PNMKN7j_0:before {
      content: " ";
      height: 1px;
      background: #e8e8e8;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      left: 1.375rem;
      right: 1.375rem
    }

    ._2iHgUKTE_0 ._3PNMKN7j_0 ._2d0QwC3-_0 {
      height: 38px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center
    }

    ._2iHgUKTE_0 ._3PNMKN7j_0 ._2d0QwC3-_0 ._36LfGj1s_0 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 62px;
      flex: 0 0 62px;
      text-align: center;
      color: #888;
      font-size: 14px;
      border-radius: 10px;
      height: 22px;
      line-height: 22px;
      background: #f6f7fb;
      font-weight: 400
    }

    ._2iHgUKTE_0 ._3PNMKN7j_0 ._2d0QwC3-_0 ._3TIVUaKt_0 {
      margin-left: 10px;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      color: #888;
      font-size: 15px;
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 400
    }

    ._2TWMGtY9_0 {
      height: 60px;
      background: transparent
    }

    ._3Qjp-kmf_0 {
      font-size: 15px;
      color: #888;
      line-height: 24px;
      border-left: 3px solid #e8e8e8;
      padding-left: 15px
    }

    ._2XiJsOMl_0,
    .EVkpJjEr_0 {
      -webkit-transition: all .3s ease;
      transition: all .3s ease
    }

    ._2Nz371_y_0 ._1HRajYpk_0,
    ._321aphJv_0 ._2GrpjiZ7_0 {
      -webkit-transform: translateX(-508px);
      transform: translateX(-508px)
    }

    ._2Nz371_y_0 ._2GrpjiZ7_0,
    ._321aphJv_0 ._1HRajYpk_0 {
      -webkit-transform: translateX(508px);
      transform: translateX(508px)
    }

    @media only screen and (max-width:769px) {
      ._15MzZzCR_0 {
        display: none !important
      }
    }

    @media only screen and (min-width:740px) {
      .d4s24Cak_0 {
        background: #fff
      }
    }

    ._9Z9oach0_0 {
      background: #f6f0e0
    }

    ._9Z9oach0_0 .DU0gW1Le_0 {
      border-top: 10px solid #efe6cf
    }

    ._9Z9oach0_0 ._3PNMKN7j_0:before {
      background: #e5d8b5
    }

    ._9Z9oach0_0 ._3PNMKN7j_0 ._2d0QwC3-_0 ._36LfGj1s_0 {
      background: #efe6cf
    }

    ._9Z9oach0_0 ._3h_65ACq_0 {
      background-color: #efe6cf
    }

    ._3Xivw4-f_0 {
      background: #353535
    }

    ._3Xivw4-f_0 ._2dsK9OZI_0,
    ._3Xivw4-f_0 ._3QuafcgX_0 {
      color: silver
    }

    ._3Xivw4-f_0 .DU0gW1Le_0 {
      border-top: 10px solid #3e3e3e
    }

    ._3Xivw4-f_0 ._3PNMKN7j_0:before {
      background: #4c4c4c
    }

    ._3Xivw4-f_0 ._3PNMKN7j_0 ._2d0QwC3-_0 ._36LfGj1s_0 {
      background: #3e3e3e;
      color: silver
    }

    ._3Xivw4-f_0 ._3PNMKN7j_0 ._2d0QwC3-_0 ._3TIVUaKt_0,
    ._3Xivw4-f_0 .DU0gW1Le_0 h2 {
      color: silver
    }

    ._3Xivw4-f_0 ._3h_65ACq_0 {
      background-color: #3e3e3e
    }
  </style>
  <style type="text/css">
    .C3Euvro5_0 {
      height: 58px
    }

    ._1mmSdAtq_0 {
      width: 100%;
      height: 58px;
      background: #fbfbfb;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0 22px;
      -webkit-transition: opacity .35s;
      transition: opacity .35s;
      opacity: 0;
      pointer-events: none;
      -webkit-box-shadow: 0 2px 3px 0 hsla(0, 0%, 89%, .38);
      box-shadow: 0 2px 3px 0 hsla(0, 0%, 89%, .38)
    }

    ._1mmSdAtq_0 a {
      width: 76px;
      height: 30px;
      text-align: center;
      border-radius: 15px;
      font-size: 13px;
      background: #fa8919;
      color: #fff;
      line-height: 30px;
      font-weight: 500
    }

    ._3J4dp-oG_0 {
      opacity: 1;
      pointer-events: auto
    }

    .Qmt5mthp_0 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start
    }

    .Qmt5mthp_0 i {
      width: 40px;
      height: 40px;
      background-image: url("http://static001.geekbang.org/static/icon/time/apple-touch-icon.png");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: contain;
      border-radius: 8px;
      -webkit-box-shadow: 0 0 3px 0 hsla(0, 0%, 89%, .38);
      box-shadow: 0 0 3px 0 hsla(0, 0%, 89%, .38)
    }

    .Qmt5mthp_0 h2 {
      font-size: 16px;
      color: #595757;
      font-weight: 500;
      margin-left: 16px
    }

    .Qmt5mthp_0 h2 span {
      font-weight: 400;
      font-size: 13px;
      color: #888
    }
  </style>
  <style type="text/css">
    ._3HCtER94_0 {
      height: 30px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding-left: 18px;
      padding-right: 22px;
      font-size: 15px;
      color: #888;
      padding-top: 20px
    }

    .XPK3khh7_0 {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      font-size: 17px;
      font-weight: 400
    }

    .u9KJ6z9x_0 {
      width: 16px;
      font-size: 12px;
      text-align: left;
      margin-right: 4px
    }

    .S8msnNlD_0 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      font-weight: 400
    }

    ._3FTQNYev_0 {
      width: 20px;
      text-align: center;
      display: inline-block;
      vertical-align: top
    }
  </style>
  <style type="text/css">
    ._1Bg5E78Y_0 {
      width: 100%;
      height: 60px;
      background: #fff;
      -webkit-transition: background-color .3s ease;
      transition: background-color .3s ease;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-left: 18px;
      padding-right: 12px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: 33px;
      border-radius: 6px 30px 30px 6px;
      -webkit-box-shadow: 0 3px 25px 4px rgba(140, 163, 191, .14);
      box-shadow: 0 3px 25px 4px rgba(140, 163, 191, .14)
    }

    ._1Bg5E78Y_0 ._2Ha38TVL_0 {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      -webkit-box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .1);
      box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .1);
      position: relative
    }

    ._1Bg5E78Y_0 ._1iA2uC1V_0 {
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 300px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0
    }

    ._1Bg5E78Y_0 ._2Kms_g0F_0 {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50%;
      z-index: 2;
      position: relative
    }

    ._1Bg5E78Y_0 .MH1rcCm7_0 ._2Kms_g0F_0 {
      color: #fff;
      margin-left: 2px
    }

    ._1Bg5E78Y_0 ._1KuRDTHn_0 ._2Kms_g0F_0 {
      color: #fff
    }

    ._1Bg5E78Y_0 .MH1rcCm7_0 ._1iA2uC1V_0 {
      -webkit-animation: HvzpPu2i_0 4s linear infinite;
      animation: HvzpPu2i_0 4s linear infinite;
      -webkit-animation-play-state: paused;
      animation-play-state: paused
    }

    ._1Bg5E78Y_0 ._1KuRDTHn_0 ._1iA2uC1V_0 {
      -webkit-animation: HvzpPu2i_0 4s linear infinite;
      animation: HvzpPu2i_0 4s linear infinite;
      -webkit-animation-play-state: running;
      animation-play-state: running
    }

    ._1Bg5E78Y_0 ._1qj_iPD7_0 {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      overflow: hidden;
      margin-right: 10px
    }

    ._1Bg5E78Y_0 ._1qj_iPD7_0 h3 {
      color: #353535;
      font-size: 15.25px;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    ._1Bg5E78Y_0 ._1qj_iPD7_0 p {
      margin: 0;
      margin-top: .125rem;
      font-size: 12px;
      font-weight: 500;
      line-height: 1rem;
      color: #999
    }

    ._1Bg5E78Y_0 ._3PhVtlEa_0 {
      width: 20px;
      height: 20px;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      position: relative;
      color: #999;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      margin-right: 20px
    }

    ._1Bg5E78Y_0 ._1l6e3976_0 {
      width: 10px;
      height: 10px;
      line-height: 10px;
      text-align: center;
      position: absolute;
      bottom: -3px;
      right: -5px;
      color: #fa8919;
      background: #fff;
      font-size: 10px;
      -webkit-transition: background-color .2s ease;
      transition: background-color .2s ease
    }

    ._1W0qSnju_0 {
      -webkit-box-shadow: 0 3px 25px 4px hsla(42, 28%, 65%, .14);
      box-shadow: 0 3px 25px 4px hsla(42, 28%, 65%, .14)
    }

    ._1W0qSnju_0,
    ._1W0qSnju_0 ._1l6e3976_0 {
      background: #f6f0e0
    }

    ._1W0qSnju_0 ._2Ha38TVL_0 {
      -webkit-box-shadow: 0 1px 2px 2px hsla(42, 28%, 65%, .14);
      box-shadow: 0 1px 2px 2px hsla(42, 28%, 65%, .14)
    }

    ._2SRR-E_O_0 {
      background: #4d4d4d;
      -webkit-box-shadow: none;
      box-shadow: none
    }

    ._2SRR-E_O_0 ._3PhVtlEa_0 {
      color: #fff
    }

    ._2SRR-E_O_0 ._1l6e3976_0 {
      background: #4d4d4d
    }

    ._2SRR-E_O_0 ._1qj_iPD7_0 h3,
    ._2SRR-E_O_0 ._1qj_iPD7_0 p {
      color: silver
    }

    @-webkit-keyframes HvzpPu2i_0 {
      to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
      }
    }

    @keyframes HvzpPu2i_0 {
      to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
      }
    }
  </style>
  <style type="text/css">
    ._29HP61GA_0 {
      font-weight: 400;
      color: #353535;
      line-height: 1.76;
      white-space: normal;
      word-break: normal;
      font-size: 17px;
      -webkit-transition: background-color .3s ease;
      transition: background-color .3s ease
    }

    ._29HP61GA_0 .MathJax_Display {
      overflow: auto
    }

    ._29HP61GA_0 .poster {
      position: fixed;
      left: -10000px;
      top: -10000px;
      overflow: hidden;
      padding: 1rem;
      background: #ececec
    }

    ._29HP61GA_0 .richcontent-pre-copy {
      font-size: 13px;
      color: #888;
      position: absolute;
      right: 1em;
      top: .5em;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
    }

    ._29HP61GA_0 .richcontent-pre-copy .iconfont {
      font-size: 12px;
      margin-right: .2em
    }

    ._29HP61GA_0 a {
      color: #fa8919;
      border-bottom: 1px solid #fa8919
    }

    ._29HP61GA_0 img {
      display: block;
      max-width: 100%;
      position: relative;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      background-color: #eee;
      vertical-align: top;
      border-radius: 0
    }

    ._29HP61GA_0 audio,
    ._29HP61GA_0 video {
      width: 100%;
      background-color: #eee
    }

    ._29HP61GA_0 pre {
      margin-top: 16px;
      padding: 34px 0 30px;
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      background: rgba(246, 247, 251, .749);
      border: 0
    }

    ._29HP61GA_0 pre code {
      font-size: 12px;
      font-family: Consolas, Liberation Mono, Menlo, monospace, Courier;
      display: block;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-left: 16px;
      margin-right: 16px;
      overflow-x: auto
    }

    ._29HP61GA_0 hr {
      border: none;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      border-top: 1px solid #f5f5f5;
      height: 1px;
      background: none
    }

    ._29HP61GA_0 h1,
    ._29HP61GA_0 h2,
    ._29HP61GA_0 h3,
    ._29HP61GA_0 h4,
    ._29HP61GA_0 h5 {
      margin-bottom: 20px;
      margin-top: 0;
      font-weight: 700
    }

    ._29HP61GA_0 b,
    ._29HP61GA_0 strong {
      font-weight: 700
    }

    ._29HP61GA_0 h1 {
      font-size: 21px
    }

    ._29HP61GA_0 h2 {
      font-size: 20px
    }

    ._29HP61GA_0 h3 {
      font-size: 19px
    }

    ._29HP61GA_0 h4 {
      font-size: 18px
    }

    ._29HP61GA_0 h5 {
      font-size: 17px
    }

    ._29HP61GA_0 p {
      font-weight: 400;
      color: #353535;
      margin-top: 0;
      margin-bottom: 30px;
      word-break: break-word
    }

    ._29HP61GA_0 blockquote {
      margin-top: 0;
      margin-bottom: 34px;
      border-left: 3px solid #e8e8e8;
      padding-left: 17px;
      color: #353535
    }

    ._29HP61GA_0 blockquote p {
      margin-top: 0;
      margin-bottom: 0
    }

    ._29HP61GA_0 ol,
    ._29HP61GA_0 ul {
      margin-bottom: 30px
    }

    ._29HP61GA_0 ol p,
    ._29HP61GA_0 ul p {
      margin-top: 0;
      margin-bottom: 0
    }

    ._29HP61GA_0 ol {
      list-style: decimal;
      margin-left: 20px
    }

    ._29HP61GA_0 ul li {
      padding-left: 17px;
      position: relative;
      margin-bottom: 10px
    }

    ._29HP61GA_0 ul li:after {
      content: "";
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #353535;
      position: absolute;
      top: 10px;
      left: 0
    }

    ._29HP61GA_0 .orange {
      color: #fa8919
    }

    ._29HP61GA_0 .reference {
      color: #888
    }

    ._29HP61GA_0 table.hljs-ln {
      margin-bottom: 0;
      border-spacing: 0;
      border-collapse: collapse
    }

    ._29HP61GA_0 table.hljs-ln,
    ._29HP61GA_0 table.hljs-ln tbody,
    ._29HP61GA_0 table.hljs-ln td,
    ._29HP61GA_0 table.hljs-ln tr {
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }

    ._29HP61GA_0 table.hljs-ln td {
      padding: 0;
      border: 0
    }

    ._29HP61GA_0 table.hljs-ln td.hljs-ln-numbers {
      min-width: 15px;
      font-size: 12px;
      color: rgba(27, 31, 35, .3);
      text-align: right;
      white-space: nowrap;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
    }

    ._29HP61GA_0 table.hljs-ln td.hljs-ln-code,
    ._29HP61GA_0 table.hljs-ln td.hljs-ln-numbers {
      font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
      line-height: 20px;
      vertical-align: top
    }

    ._29HP61GA_0 table.hljs-ln td.hljs-ln-code {
      position: relative;
      padding-right: 10px;
      padding-left: 10px;
      overflow: visible;
      font-size: 13px;
      color: #666;
      word-wrap: normal;
      white-space: pre
    }

    ._2gMcXXSK_0 {
      font-size: 15px
    }

    ._2gMcXXSK_0 h1 {
      font-size: 19px
    }

    ._2gMcXXSK_0 h2 {
      font-size: 18px
    }

    ._2gMcXXSK_0 h3 {
      font-size: 17px
    }

    ._2gMcXXSK_0 h4 {
      font-size: 16px
    }

    ._2gMcXXSK_0 h5 {
      font-size: 15px
    }

    ._2gMcXXSK_0 p {
      margin-bottom: 26px
    }

    ._2gMcXXSK_0 blockquote {
      margin-bottom: 30px
    }

    ._2gMcXXSK_0 ol,
    ._2gMcXXSK_0 ul {
      margin-bottom: 26px
    }

    ._1-IhkAAb_0 {
      font-size: 19px
    }

    ._1-IhkAAb_0 h1 {
      font-size: 23px
    }

    ._1-IhkAAb_0 h2 {
      font-size: 22px
    }

    ._1-IhkAAb_0 h3 {
      font-size: 21px
    }

    ._1-IhkAAb_0 h4 {
      font-size: 20px
    }

    ._1-IhkAAb_0 h5 {
      font-size: 19px
    }

    ._1XhbM4Sp_0 pre {
      background: hsla(43, 50%, 87%, .749)
    }

    ._1XhbM4Sp_0 blockquote {
      border-color: #efe6cf
    }

    ._2wERfXHe_0 h1,
    ._2wERfXHe_0 h2,
    ._2wERfXHe_0 h3,
    ._2wERfXHe_0 h4,
    ._2wERfXHe_0 h5,
    ._2wERfXHe_0 p {
      color: silver
    }

    ._2wERfXHe_0 blockquote {
      border-color: #3e3e3e
    }

    ._2wERfXHe_0 li,
    ._2wERfXHe_0 strong {
      color: silver
    }

    ._2wERfXHe_0 pre {
      background: rgba(62, 62, 62, .749)
    }

    ._2wERfXHe_0 img {
      opacity: .9
    }

    ._2wERfXHe_0 ul li:after {
      background: silver
    }

    ._2wERfXHe_0 table.hljs-ln td.hljs-ln-numbers {
      color: #b2b2b2
    }

    ._2wERfXHe_0 table.hljs-ln td.hljs-ln-code {
      color: silver
    }
  </style>
  <style type="text/css">
    .reJj6Thl_0 {
      list-style-position: inside;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      margin-top: 40px
    }

    .reJj6Thl_0 a {
      border-bottom: none
    }

    .reJj6Thl_0 ._2273kGdT_0 {
      width: 35px;
      height: 35px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      border-radius: 50%
    }

    .reJj6Thl_0:last-child ._2CG0SquK_0 {
      border-bottom: none
    }

    .reJj6Thl_0 ._2CG0SquK_0 {
      margin-left: .5rem;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      padding-bottom: 25px;
      border-bottom: .5px solid #e8e8e8;
      -webkit-transition: border-bottom .3s ease;
      transition: border-bottom .3s ease;
      overflow: hidden
    }

    .reJj6Thl_0 ._2CG0SquK_0 ._304R4gla_0 {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding-bottom: 10px
    }

    .reJj6Thl_0 ._2CG0SquK_0 ._3M6kV3zb_0 {
      color: #4c4c4c;
      font-size: 16px;
      font-weight: 400;
      white-space: normal;
      word-break: normal;
      line-height: 1.6;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical
    }

    .reJj6Thl_0 ._2CG0SquK_0 ._3D2NkqD6_0 {
      overflow: auto;
      -webkit-line-clamp: unset
    }

    .reJj6Thl_0 ._2CG0SquK_0 ._1H1Z49Dr_0 {
      color: #888;
      font-size: 11px;
      line-height: 1;
      margin-top: 4px
    }

    .reJj6Thl_0 ._2CG0SquK_0 ._18Dng5rT_0 {
      color: #353535;
      font-size: 14px;
      font-weight: 700;
      height: 20px;
      line-height: 20px
    }

    .reJj6Thl_0 ._2CG0SquK_0 ._1bkbsnjg_0 {
      height: 15px;
      line-height: 15px;
      width: 30px;
      font-size: 10px;
      color: #fff;
      background: #cbcbcb;
      text-align: center;
      display: inline-block;
      border-radius: 3px;
      vertical-align: top;
      margin-top: 2px
    }

    .reJj6Thl_0 ._2eMTs2JE_0 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center
    }

    .reJj6Thl_0 ._2eMTs2JE_0 div:last-child {
      width: auto
    }

    .reJj6Thl_0 ._1YQBH3WC_0 {
      color: #999;
      font-size: 13px;
      margin-left: 42px
    }

    .reJj6Thl_0 ._13n1j2Zp_0 {
      color: #999;
      font-size: 13px;
      margin-left: 38px
    }

    .reJj6Thl_0 ._2P4B1Hdm_0 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: 15.25px;
      text-decoration: none
    }

    .reJj6Thl_0 ._2P4B1Hdm_0 i {
      color: #999;
      display: inline-block;
      font-size: 15px;
      margin-right: 4px;
      height: 27px;
      width: 15px;
      margin-top: -2px
    }

    .reJj6Thl_0 ._2P4B1Hdm_0 i._2A421P4G_0 {
      background: url() no-repeat 50%;
      background-size: 15px
    }

    .reJj6Thl_0 ._2P4B1Hdm_0 span {
      color: #888;
      font-size: 13px;
      font-weight: 400
    }

    .reJj6Thl_0 ._2P4B1Hdm_0 span._2A421P4G_0 {
      color: #fa8919
    }

    .reJj6Thl_0 ._2r3UB1GX_0 {
      font-size: 13px;
      color: #b2b2b2;
      height: 16px;
      padding-top: 8px
    }

    .reJj6Thl_0 ._2r3UB1GX_0 span {
      font-weight: 500
    }

    .reJj6Thl_0 ._2r3UB1GX_0 i,
    .reJj6Thl_0 ._2r3UB1GX_0 span {
      height: 16px;
      line-height: 16px;
      display: inline-block;
      vertical-align: top
    }

    .reJj6Thl_0 ._2xNIY4NG_0 {
      margin-top: 10px
    }

    .reJj6Thl_0 ._2xNIY4NG_0 ._33BLbmw4_0 {
      color: #888;
      font-size: 14px;
      font-weight: 400;
      white-space: normal;
      word-break: normal;
      background: #f6f7fb;
      -webkit-transition: background .3s ease;
      transition: background .3s ease;
      border-radius: 10px;
      padding: 18px;
      overflow-x: scroll
    }

    .reJj6Thl_0 ._2xNIY4NG_0 ._1H1Z49Dr_0 {
      color: #888;
      font-size: 9px
    }

    ._0X_LEcd_0 ._2xNIY4NG_0 ._33BLbmw4_0 {
      background: #efe6cf
    }

    .cGm0Q9aA_0 ._2CG0SquK_0 {
      border-bottom: 1px solid #4c4c4c
    }

    .cGm0Q9aA_0 ._2CG0SquK_0 ._1H1Z49Dr_0,
    .cGm0Q9aA_0 ._2CG0SquK_0 ._3M6kV3zb_0,
    .cGm0Q9aA_0 ._2CG0SquK_0 ._18Dng5rT_0 {
      color: silver
    }

    .cGm0Q9aA_0 ._2xNIY4NG_0 ._33BLbmw4_0 {
      color: silver;
      background: #3e3e3e
    }

    .cGm0Q9aA_0 ._1YQBH3WC_0,
    .cGm0Q9aA_0 ._2P4B1Hdm_0 i,
    .cGm0Q9aA_0 ._2P4B1Hdm_0 span,
    .cGm0Q9aA_0 ._13n1j2Zp_0 {
      color: #999
    }
  </style>
  <script type="text/javascript" charset="utf-8" async="" src="https://static001.geekbang.org/static/time/js/25.8f69596224fd6ade8300.js"></script>
  <style type="text/css">
    .button-cancel[data-v-a6a58a5e] {
      color: #888;
      border: 1px solid #888;
      border-radius: 3px;
      margin-right: 12px
    }

    .button-cancel[data-v-a6a58a5e],
    .button-primary[data-v-a6a58a5e] {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      height: 35px;
      display: inline-block;
      font-size: 15px;
      text-align: center;
      line-height: 36px
    }

    .button-primary[data-v-a6a58a5e] {
      color: #fff;
      background-color: #fa8919;
      border-radius: 3px
    }

    .wrapper[data-v-a6a58a5e] {
      max-width: 46.25rem;
      margin: 0 auto;
      background-color: #f5f5f5
    }

    .banner[data-v-a6a58a5e] {
      width: 100%;
      background-color: #eee
    }

    .banner .slider-item[data-v-a6a58a5e] {
      width: 100%;
      position: relative
    }

    .banner .slider-item .slider-item-image[data-v-a6a58a5e] {
      width: 100%
    }

    .banner .slider-item .slider-item-info[data-v-a6a58a5e] {
      position: absolute;
      width: 100%;
      background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
      background-image: linear-gradient(0deg, #000, transparent);
      bottom: 0
    }

    .banner .slider-item .slider-item-title[data-v-a6a58a5e] {
      color: #fff;
      font-size: 18px;
      padding-left: 22px
    }

    .banner .slider-item .slider-item-desc[data-v-a6a58a5e] {
      color: #d9d9d9;
      font-size: 12.5px;
      padding-top: 4px;
      padding-left: 21px;
      margin-bottom: 11px
    }

    .filter[data-v-a6a58a5e] {
      padding-left: 22px;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      background-color: #f5f5f5
    }

    .filter .filter-control .filter-control-order[data-v-a6a58a5e],
    .filter .filter-control[data-v-a6a58a5e],
    .filter[data-v-a6a58a5e] {
      height: 29px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center
    }

    .filter .filter-control .filter-control-order[data-v-a6a58a5e] {
      cursor: pointer
    }

    .filter .filter-control .filter-control-order .icon-asc[data-v-a6a58a5e],
    .filter .filter-control .filter-control-order .icon-desc[data-v-a6a58a5e] {
      width: 12px;
      height: 12px;
      margin-right: 7px
    }

    .filter .filter-control .filter-control-order .filter-control-text[data-v-a6a58a5e] {
      color: #888;
      font-size: 11px
    }

    .filter .filter-control .filter-total[data-v-a6a58a5e] {
      color: #888;
      font-size: 11px;
      margin-left: 8px;
      padding-left: 8px;
      border-left-width: 1px;
      border-left-color: #d9d9d9;
      border-left-style: solid
    }

    .content-list[data-v-a6a58a5e] {
      background-color: #f5f5f5
    }

    .content-list .contentlistwrap[data-v-a6a58a5e] {
      padding-bottom: 67px
    }

    .button-cancel[data-v-a6a58a5e] {
      border: 0;
      border-radius: 0;
      margin-right: 0;
      background: #b2b2b2;
      color: #fff
    }

    @media (max-width:769px) {
      .page-article-list .breadcrumb[data-v-a6a58a5e] {
        padding: 10px 22px
      }
    }
  </style>
  <style type="text/css">
    .bottom {
      width: 100%;
      background-color: #f5f5f5;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 10
    }

    .bottom,
    .bottom .bottom-wrapper {
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row
    }

    .bottom .bottom-wrapper {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between
    }

    .bottom .bottom-wrapper a {
      height: 50px;
      line-height: 50px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }
  </style>
  <style type="text/css">
    .breadcrumb {
      padding: 30px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      background: #fff
    }

    .breadcrumb a.title {
      color: #e57c39;
      font-size: 15px;
      font-weight: 400
    }

    .breadcrumb span.title {
      color: #888;
      font-size: 15px;
      font-weight: 400
    }

    .breadcrumb .split {
      color: #ccc;
      font-size: 10px;
      margin-right: 5px
    }
  </style>
  <style type="text/css">
    .article-item {
      cursor: pointer;
      padding-top: 15px;
      padding-left: 22px;
      padding-right: 22px;
      margin-bottom: 9px;
      background-color: #fff;
      position: relative
    }

    .article-item-flag-trial {
      width: 14px;
      height: 31px;
      position: absolute;
      top: 0;
      right: 12px
    }

    .article-item-title {
      font-size: 17px;
      color: #353535;
      font-weight: 400
    }

    .article-item-title.pad-right {
      padding-right: 14px
    }

    .article-item-hd {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start
    }

    .article-item-view {
      font-size: 9px;
      color: #fa8919;
      -webkit-transform: scale(.875);
      transform: scale(.875)
    }

    .article-item-viewed {
      font-size: 9px;
      color: #888
    }

    .article-item-time {
      font-size: 11px;
      color: #888;
      margin-left: 9px
    }

    .article-item-cover {
      width: 100%;
      margin-top: 10px;
      margin-bottom: 10px
    }

    .article-item-desc {
      color: #888;
      font-size: 12.5px;
      line-height: 19px;
      padding-bottom: 14px
    }

    .article-item-more {
      padding-top: 14px;
      padding-bottom: 15px;
      border-top-color: #e8e8e8;
      border-top-width: 1px;
      border-top-style: solid;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between
    }

    .article-item-more-text {
      color: #353535;
      font-size: 12.5px
    }
  </style>
  <style type="text/css">
    ._3I_Jq5nz_0 {
      position: fixed
    }

    ._3I_Jq5nz_0,
    ._3xvOGrxA_0 {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100
    }

    ._3xvOGrxA_0 {
      position: absolute;
      background-color: #000
    }

    ._20ld22E9_0 {
      position: relative;
      z-index: 101;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    ._20ld22E9_0 img {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      visibility: hidden
    }

    ._20ld22E9_0 .hVX44oVP_0 {
      visibility: visible
    }

    .DLfklZIn_0 {
      color: #888;
      font-size: 15px;
      text-align: center;
      height: 50px;
      line-height: 50px
    }

    ._283MhL7F_0 {
      height: 50px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-left: 15px;
      border-bottom: 1px solid #e8e8e8
    }

    ._1nrI-43n_0 {
      font-size: 24px;
      height: 26px;
      width: 26px;
      color: #fff;
      text-align: center;
      line-height: 26px;
      right: 20px;
      top: 20px;
      position: absolute;
      z-index: 102;
      text-shadow: 0 0 4px rgba(0, 0, 0, .3)
    }
  </style>
</head>

<body style=""><svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
    <symbol id="icon-android" viewBox="0 0 1024 1024">
      <path d="M862.778202 640.174593c-17.774874 0-32.175395-13.876101-32.175395-30.980825L830.602807 414.807258c0-17.134486 14.399495-30.981851 32.175395-30.981851 17.773847 0 32.203104 13.847365 32.203104 30.981851l0 194.385484C894.981306 626.298492 880.553076 640.174593 862.778202 640.174593zM380.771249 151.679606 380.771249 151.679606l-56.204315-70.516577c-3.83925-4.829593-2.675467-11.578298 2.619023-15.097354 5.293464-3.520082 12.682557-2.443532 16.523859 2.385035l58.093665 72.901612c33.367912-14.662218 70.603809-22.865138 109.905574-22.865138 39.302791 0 76.509952 8.203946 109.875812 22.865138l58.094691-72.901612c3.83925-4.829593 11.258104-5.905117 16.552594-2.385035 5.265755 3.520082 6.429537 10.268787 2.589261 15.097354l-56.204315 70.516577c64.726402 35.578483 111.504491 96.640099 124.53803 168.465162L256.233218 320.144767C269.295493 248.319705 316.042794 187.258088 380.771249 151.679606zM622.341222 254.749242 622.341222 254.749242c17.716377 0 32.058401-13.439939 32.058401-29.992534 0-16.552594-14.34305-29.963798-32.058401-29.963798-17.65788 0-32.028639 13.411204-32.028639 29.963798C590.312583 241.309303 604.683343 254.749242 622.341222 254.749242zM401.01839 254.749242 401.01839 254.749242c17.716377 0 32.028639-13.439939 32.028639-29.992534 0-16.552594-14.312263-29.963798-32.028639-29.963798-17.687641 0-32.029665 13.411204-32.029665 29.963798C368.988724 241.309303 383.330748 254.749242 401.01839 254.749242zM161.221798 640.174593 161.221798 640.174593c-17.803609 0-32.20413-13.876101-32.20413-30.980825L129.017668 414.807258c0-17.134486 14.400521-30.981851 32.20413-30.981851 17.773847 0 32.175395 13.847365 32.175395 30.981851l0 194.385484C193.397193 626.298492 178.995645 640.174593 161.221798 640.174593zM766.691258 718.719625 766.691258 718.719625c0 31.011613-25.658625 56.117082-57.3096 56.117082l-40.116617 0 0 131.868626c0 29.440404-24.349114 53.294859-54.42888 53.294859-30.079766 0-54.42888-23.854455-54.42888-53.294859L560.407282 774.836707l-97.425191 0 0 131.868626c0 29.440404-24.378875 53.294859-54.429906 53.294859-30.050004 0-54.42888-23.854455-54.42888-53.294859L354.123306 774.836707l-40.116617 0c-31.621213 0-57.308573-25.10547-57.308573-56.117082L256.698115 384.348801l509.992117 0L766.690232 718.719625z"></path>
    </symbol>
    <symbol id="icon-apple" viewBox="0 0 1024 1024">
      <path d="M791.489559 544.090212c-1.290235-129.678896 105.758341-191.876433 110.550644-194.968902-60.149545-88.022725-153.845209-100.085402-187.24797-101.478037-79.748834-8.069091-155.586003 46.939992-196.074818 46.939992-40.365935 0-102.809232-45.752156-168.959395-44.543841-86.916809 1.290235-167.054762 50.544459-211.803402 128.38866-90.295997 156.691919-23.121837 388.831888 64.880408 515.930313 43.007846 62.197537 94.289582 132.075047 161.627581 129.576496 64.839448-2.580471 89.35392-41.96337 167.751079-41.96337s100.43356 41.96337 169.041315 40.673134c69.77511-1.290235 113.991272-63.405853 156.691919-125.78771 49.397583-72.171262 69.73415-142.028292 70.921986-145.632759-1.556474-0.696318-136.068633-52.244293-137.399828-207.133978zM662.568421 163.511735c35.737472-43.356005 59.862826-103.505549 53.288769-163.511735-51.486536 2.088953-113.868392 34.283397-150.81418 77.557482-33.136521 38.379383-62.156577 99.634843-54.374205 158.432713 57.466674 4.485104 116.121184-29.204375 151.899616-72.457981z"></path>
    </symbol>
    <symbol id="icon-arrowright1" viewBox="0 0 1024 1024">
      <path d="M267.649318 918.655743 308.671617 959.678042 756.349659 512 308.671617 64.322981 267.649318 105.34528 674.305061 512Z"></path>
    </symbol>
    <symbol id="icon-ok" viewBox="0 0 1024 1024">
      <path d="M997.12174459 172.27043777c-16.65294032-15.61730971-42.91653278-14.87165566-58.53513703 1.82270988L386.13981108 762.29120758l-301.78276187-297.35026283c-16.32153853-16.07298718-42.54370576-15.90728628-58.61669294 0.41425224-16.07298718 16.27881876-15.86586107 42.54241122 0.45567747 58.57526772l332.02317589 327.09357417c0.12427568 0.12427568 0.28997657 0.1657009 0.41295772 0.28997657 0.12557022 0.12427568 0.16699543 0.28997657 0.2912711 0.41425225 2.60978915 2.48551348 5.75810623 3.89397111 8.78214765 5.55098011 1.49001355 0.86992972 2.77549005 2.15411168 4.34835405 2.77549006 4.88817651 1.90556034 10.0663296 2.89976573 15.20305745 2.89976571 5.42670444 0 10.85340887-1.07705584 15.90728629-3.23116753 1.69972875-0.70422882 3.02404141-2.15411168 4.59819994-3.06546662 3.10689185-1.82270989 6.33805938-3.3554432 8.98927377-6.0480828 0.12427568-0.12427568 0.1657009-0.33140179 0.28997657-0.45567748 0.08285045-0.12557022 0.24855135-0.16699543 0.37282701-0.2912711l581.48717354-619.05855778C1014.6433201 214.19276515 1013.77339038 187.97059792 997.12174459 172.27043777z"></path>
    </symbol>
    <symbol id="icon-leftarrow1" viewBox="0 0 1024 1024">
      <path d="M266.163989 512.035816 266.163989 512.035816c-0.992607 13.43294 3.208065 26.929326 13.338796 37.123502l396.655995 396.499429c18.788925 18.691711 48.957015 18.72548 67.867714 0.033769 18.755156-18.788925 18.466584-48.957015-0.062422-67.706031L377.856837 512.069585l366.077559-366.042767c18.49626-18.657942 18.62315-49.113581-0.097214-67.774593-18.853393-18.657942-49.113581-18.657942-67.805292-0.029676l-396.528082 396.817678C269.436522 485.33264 265.171382 498.828003 266.163989 512.035816L266.163989 512.035816z"></path>
    </symbol>
    <symbol id="icon-shezhi" viewBox="0 0 1024 1024">
      <path d="M640.516 888.95C640.516 888.95 640.516 888.95 640.516 888.95c-13.9-0.002-27.404-6.01-36.132-16.066-11.886-13.62-49.55-49.036-80.378-49.036-30.616 0-68.862 35.622-79.844 48.1-8.706 9.886-22.12 15.79-35.882 15.79-6.556 0-12.742-1.314-18.39-3.908l-0.988-0.452-93.706-54.758-0.93-0.68c-17.06-12.484-23.554-36.89-15.102-56.782 0.064-0.152 8.642-20.834 8.642-39.696 0-57.234-44.558-103.804-99.332-103.804l-3.32 0c-0.202 0.008-0.402 0.01-0.604 0.01-15.69 0-28.462-14.56-32.542-37.104-0.328-1.804-7.998-44.562-7.998-78.244 0-33.69 7.668-76.446 7.994-78.248 4.134-22.826 17.186-37.492 33.15-37.096l3.322 0c54.772 0 99.332-46.566 99.332-103.804 0-18.854-8.574-39.534-8.662-39.742-8.442-19.87-1.906-44.274 15.224-56.714l0.968-0.706 98.898-56.764 1.028-0.458c5.57-2.482 11.668-3.738 18.128-3.738 13.73 0 27.174 5.774 35.958 15.448 11.704 12.808 48.704 46.116 78.65 46.116 29.662 0 66.438-32.652 78.1-45.232 8.732-9.478 22.078-15.152 35.678-15.152 6.59 0 12.802 1.302 18.462 3.872l0.998 0.454 95.52 55.458 0.944 0.688c17.088 12.464 23.598 36.874 15.138 56.776-0.062 0.152-8.642 20.836-8.642 39.694 0 57.24 44.562 103.804 99.332 103.804l3.32 0c15.944-0.37 29.016 14.268 33.146 37.096 0.33 1.802 8 44.558 8 78.246 0 33.684-7.67 76.442-8 78.246-4.13 22.826-17.202 37.436-33.148 37.094l-3.318 0c-54.77 0-99.332 46.57-99.332 103.804 0 18.856 8.574 39.53 8.66 39.738 8.44 19.86 1.916 44.264-15.188 56.72l-0.958 0.698-97.126 56.098-1.01 0.458C653.016 887.682 646.936 888.95 640.516 888.95L640.516 888.95zM637.564 841.126c0.436 0.296 1.66 0.804 2.95 0.804 0.056 0 0.104 0 0.15-0.004l90.744-52.418c-2.19-5.314-12.208-31.124-12.208-58.044 0-80.51 60.684-146.488 136.756-150.62 1.098-6.316 7.04-41.854 7.04-68.526 0-26.664-5.94-62.194-7.038-68.528-76.074-4.128-136.758-70.108-136.758-150.62 0-26.958 10.048-52.8 12.22-58.076l-89.276-51.834c-0.102-0.008-0.226-0.012-0.372-0.012-1.522 0-2.946 0.58-3.416 0.91-1.496 1.608-14.44 15.322-33.028 28.988-27.512 20.23-53.536 30.486-77.334 30.486-24.034 0-50.262-10.458-77.954-31.086-18.702-13.93-31.702-27.906-33.204-29.546-0.476-0.336-1.916-0.932-3.45-0.932-0.12 0-0.226 0.002-0.318 0.008l-92.468 53.076c2.216 5.384 12.196 31.146 12.196 58.016 0 80.51-60.682 146.49-136.758 150.62-1.096 6.324-7.04 41.862-7.04 68.528 0 26.664 5.942 62.194 7.042 68.528 76.076 4.128 136.756 70.108 136.756 150.618 0 27.01-10.084 52.898-12.234 58.108l87.518 51.142c0.056 0.004 0.122 0.004 0.194 0.004 1.28 0 2.494-0.492 2.922-0.78 1.636-1.838 14.71-16.296 33.534-30.714 28.066-21.496 54.736-32.392 79.27-32.392 24.77 0 51.636 11.104 79.87 33.012C622.808 824.538 635.932 839.264 637.564 841.126L637.564 841.126zM524.326 650.038c-72.942 0-132.284-62.018-132.284-138.242 0-76.222 59.342-138.238 132.284-138.238 72.944 0 132.286 62.014 132.286 138.238C656.612 588.02 597.27 650.038 524.326 650.038L524.326 650.038zM524.326 420.578c-48.13 0-87.29 40.92-87.29 91.216 0 50.298 39.16 91.218 87.29 91.218 48.134 0 87.292-40.92 87.292-91.218C611.62 461.498 572.462 420.578 524.326 420.578L524.326 420.578z"></path>
    </symbol>
    <symbol id="icon-yinliang-copy" viewBox="0 0 1024 1024">
      <path d="M678.569984 354.628608c-2.898944-7.727104-8.73472-13.999104-16.164864-17.391616-6.076416-3.41504-13.274112-4.893696-20.66432-3.729408-17.586176 2.770944-29.575168 19.423232-26.774528 37.19168 1.586176 10.061824 7.575552 18.320384 15.665152 23.092224 31.039488 33.216512 50.143232 77.703168 50.143232 126.763008 0 53.681152-22.890496 101.904384-59.286528 135.862272-6.747136 5.82144-11.02336 14.427136-11.02336 24.0384 0 17.531904 14.212096 31.744 31.745024 31.744 8.97536 0 17.074176-3.730432 22.847488-9.71776 6.161408-3.576832 10.970112-9.237504 13.513728-16.031744 39.776256-43.931648 64.222208-101.956608 64.222208-165.894144C742.791168 456.604672 718.345216 398.590976 678.569984 354.628608z"></path>
      <path d="M789.633024 238.830592c-5.279744-10.749952-16.3328-18.152448-29.118464-18.152448-17.907712 0-32.425984 14.518272-32.425984 32.427008 0 11.754496 6.254592 22.048768 15.619072 27.73504 54.951936 57.501696 88.880128 135.248896 88.880128 221.06624 0 96.089088-42.518528 182.078464-109.546496 240.768l0.124928 0.145408c-10.517504 5.219328-17.752064 16.063488-17.752064 28.601344 0 17.626112 14.288896 31.915008 31.915008 31.915008 10.4704 0 19.762176-5.042176 25.581568-12.829696 0.280576-0.333824 0.562176-0.667648 0.831488-1.012736l0.080896 0.080896c80.111616-70.1184 130.968576-172.84096 130.968576-287.6672C894.793728 399.910912 854.69696 307.396608 789.633024 238.830592z"></path>
      <path d="M448.487424 183.721984 289.050624 346.851328 191.880192 346.851328c-41.570304 0-62.021632 22.37952-62.021632 62.032896l0 206.718976c0 39.005184 21.098496 62.042112 62.021632 62.042112l97.171456 0 159.435776 163.109888c45.809664 43.02336 115.52256 24.064 115.52256-47.366144L564.009984 231.07584C564.009984 158.90944 493.427712 141.606912 448.487424 183.721984zM501.989376 761.613312c0 46.959616-20.816896 20.632576-42.176512-0.446464-37.228544-36.745216-93.476864-96.119808-139.710464-145.563648l-86.875136 0c-31.434752 0-41.347072-10.541056-41.347072-41.347072L191.880192 450.22208c0-30.152704 10.559488-41.337856 41.347072-41.337856l87.842816 0c45.993984-49.707008 101.695488-108.972032 138.902528-145.384448 21.117952-20.663296 42.015744-47.586304 42.015744 1.302528C501.989376 365.810688 501.989376 662.644736 501.989376 761.613312z"></path>
    </symbol>
    <symbol id="icon-quanping" viewBox="0 0 1024 1024">
      <path d="M223.744 590.336h-37.376v242.176h241.664v-36.864H223.744v-205.312z" fill=""></path>
      <path d="M443.392 847.872H171.008v-273.408h68.096v205.312h204.288z" fill=""></path>
      <path d="M201.728 817.152h210.944v-6.144H208.384v-205.312h-6.656zM573.952 795.136v37.376h242.176v-241.664h-36.864v204.288z"
        fill=""></path>
      <path d="M831.488 847.872H558.08v-68.096h205.312v-204.288h67.584v272.384z" fill=""></path>
      <path d="M589.312 817.152h211.968v-210.944h-6.144v204.288h-205.312v6.656zM428.544 228.864v-37.888H185.856v242.176h36.864V228.864z"
        fill=""></path>
      <path d="M238.08 448.512H170.496V175.616h273.408v68.096H238.08z" fill=""></path>
      <path d="M201.216 417.792h6.144V213.504h205.312v-6.656H201.216zM778.24 433.664h37.888V191.488h-242.176v36.864H778.24z"
        fill=""></path>
      <path d="M831.488 449.024H762.88V243.712h-204.288V176.128h272.384v272.896z" fill=""></path>
      <path d="M793.6 418.304h6.656V206.848h-210.944v6.144H793.6z" fill=""></path>
    </symbol>
    <symbol id="icon-zhongxinbofang" viewBox="0 0 1024 1024">
      <path d="M585.00608 88.21248c-237.89056 0-431.44704 193.99168-431.44704 432.42496a432.55296 432.55296 0 0 0 2.52416 46.7968L68.6592 478.94528a34.14016 34.14016 0 0 0-48.5632 47.98464l141.49632 143.20128a47.0528 47.0528 0 0 0 33.67936 14.03904c0.02048 0 0.04096 0 0.0256 0.03584a47.22688 47.22688 0 0 0 33.65376-14.09024l141.45024-143.1808a34.16064 34.16064 0 0 0-48.5632-47.98976l-95.80032 96.9728a368.37888 368.37888 0 0 1-4.20864-55.28064c0-200.79104 162.93376-364.16 363.18208-364.16 200.27392 0 363.20256 163.36384 363.20256 364.16 0 200.77056-162.93376 364.10368-363.20256 364.10368a359.84896 359.84896 0 0 1-257.664-107.52 320.49664 320.49664 0 0 1-8.192-8.4992 34.14016 34.14016 0 0 0-48.78848 47.74912 427.8528 427.8528 0 0 0 314.64448 136.52992c237.90592 0 431.46752-193.95072 431.46752-432.36864-0.00512-238.42816-193.56672-432.41984-431.47264-432.41984z"
        fill="#7B7B7B"></path>
    </symbol>
    <symbol id="icon-bofang" viewBox="0 0 1024 1024">
      <path d="M139.7 64.9v894.2L884.3 512z" fill="#5C5C5C"></path>
    </symbol>
    <symbol id="icon-quxiaoquanping" viewBox="0 0 1024 1024">
      <path d="M17.066667 795.306667h211.626666V1006.933333h141.653334V653.653333H17.066667v141.653334z m211.626666-566.613334H17.066667v141.653334h353.28V17.066667h-141.653334v211.626666zM653.653333 1006.933333h141.653334V795.306667H1006.933333v-141.653334H653.653333V1006.933333z m141.653334-778.24V17.066667h-141.653334v353.28H1006.933333v-141.653334H795.306667z"></path>
    </symbol>
    <symbol id="icon-play1" viewBox="0 0 1024 1024">
      <path d="M512 0C229.76 0 0 229.76 0 512s229.76 512 512 512 512-229.76 512-512-229.76-512-512-512z m0 960c-247.04 0-448-200.96-448-448s200.96-448 448-448 448 200.96 448 448-200.96 448-448 448zM435.2 277.76a35.712 35.712 0 0 0-19.84-7.04c-16.64 0-32 12.8-32 32v418.56c0 19.2 15.36 32 32 32 7.04 0 14.08-1.92 19.84-7.04l257.92-209.28a32 32 0 0 0 0-49.92L435.2 277.76z m11.52 376.32V369.92L622.08 512l-175.36 142.08z"
        fill="#444444"></path>
    </symbol>
    <symbol id="icon-ic_replay_px" viewBox="0 0 1024 1024">
      <path d="M512 213.333333V42.666667L298.666667 256l213.333333 213.333333v-170.666666c141.44 0 256 114.56 256 256s-114.56 256-256 256-256-114.56-256-256H170.666667c0 188.586667 152.746667 341.333333 341.333333 341.333333s341.333333-152.746667 341.333333-341.333333-152.746667-341.333333-341.333333-341.333334z"
        fill=""></path>
    </symbol>
    <symbol id="icon-done" viewBox="0 0 1024 1024">
      <path d="M511.67197 0.765403a511.617298 511.617298 0 1 0 511.726642 511.562627A511.617298 511.617298 0 0 0 511.67197 0.765403z m293.477416 378.819861l-330.927496 330.872825a46.197544 46.197544 0 0 1-65.60598 0L218.686599 520.255419a46.416231 46.416231 0 0 1 65.60598-65.60598l157.235664 157.454352 298.124507-298.179178a46.361559 46.361559 0 0 1 68.230218 62.763054 38.270155 38.270155 0 0 1-2.788254 2.952269z"></path>
    </symbol>
    <symbol id="icon-shanchu1" viewBox="0 0 1024 1024">
      <path d="M32.035491 1023.976262a32.000116 32.000116 0 0 1-22.644446-54.62129l456.915116-457.380572L9.391045 54.454191A32.000116 32.000116 0 0 1 54.679937 9.235117l479.419925 480.025018a31.976844 31.976844 0 0 1 0 45.219074l-479.419925 480.025018a31.813934 31.813934 0 0 1-22.644446 9.472035z m960.143128 0a31.813934 31.813934 0 0 1-22.644446-9.309125l-479.419926-480.025018a31.976844 31.976844 0 0 1 0-45.219074L969.534173 9.398027a32.000116 32.000116 0 0 1 45.288892 45.219073L557.907949 511.9744l456.915116 457.310754a32.000116 32.000116 0 0 1-22.644446 54.691108z"></path>
    </symbol>
    <symbol id="icon-zanting" viewBox="0 0 1024 1024">
      <path d="M119.289 0h181.567v1024H119.289zM721.759 0h182.952v1024H721.759z"></path>
    </symbol>
    <symbol id="icon-praise" viewBox="0 0 1024 1024">
      <path d="M287.922748 327.842488c-4.421079 2.275555-13.328252 6.664126-20.853838 10.402538l-12.369268 6.176507-11.556569-7.476825a95.638334 95.638334 0 0 0-51.655103-16.416505H95.362017A95.45954 95.45954 0 0 0 0 415.776442v512.812617A95.45954 95.45954 0 0 0 95.362017 1023.999837h96.125953a92.355033 92.355033 0 0 0 76.930019-41.122533l9.4273-13.815871 16.253966 4.063492c26.006345 6.339047 67.535227 16.091426 123.708933 28.932059A937.853819 937.853819 0 0 0 608.971078 1023.999837H784.091304c54.385769 0 92.745128-20.479997 113.972807-60.952371A1093.339255 1093.339255 0 0 0 1023.999837 444.87104c0-57.376499-46.990215-97.036175-90.729636-109.551728-31.597709-8.289522-100.238206-9.752379-195.25889-12.027935l-75.808495-1.787936 3.44584-26.493964a621.892981 621.892981 0 0 0 3.559619-79.644432C669.208275 108.73903 589.937684 0 512.113696 0a95.898397 95.898397 0 0 0-95.394524 94.59808c-1.771682 144.822834-81.464876 208.2133-128.796424 233.244408z"></path>
    </symbol>
    <symbol id="icon-play" viewBox="0 0 1024 1024">
      <path d="M900.506923 407.270163L246.46493 18.029536C229.112396 8.498257 170.621177-13.647951 125.641949 11.862238S70.388562 69.470411 70.388562 90.775624v845.340374c0 14.156753-5.606635 59.149998 57.902522 79.614216a160.672139 160.672139 0 0 0 118.173846-6.868128l654.041993-389.240627c23.828198-14.156753 52.912617-45.83424 52.912616-109.749878s-31.453222-87.323338-52.912616-102.601418zM253.879705 790.483657V236.407965L712.446372 513.375728z"></path>
    </symbol>
    <symbol id="icon-pause" viewBox="0 0 1024 1024">
      <path d="M126.246575 98.191781c0-54.229918 44.074082-98.191781 98.191781-98.191781 54.229918 0 98.191781 44.003945 98.191781 98.191781v827.616438c0 54.229918-44.074082 98.191781-98.191781 98.191781-54.229918 0-98.191781-44.003945-98.191781-98.191781V98.191781z m575.123288 0c0-54.229918 44.074082-98.191781 98.191781-98.191781 54.229918 0 98.191781 44.003945 98.191781 98.191781v827.616438c0 54.229918-44.074082 98.191781-98.191781 98.191781-54.229918 0-98.191781-44.003945-98.191781-98.191781V98.191781z"></path>
    </symbol>
    <symbol id="icon-down" viewBox="0 0 1053 1024">
      <path d="M488.806044 847.474529c6.06441 5.333758 13.268636 9.220826 21.042771 11.398168a42.377803 42.377803 0 0 0 32.382487 0 36.386459 36.386459 0 0 0 21.042771-11.398168l396.55395-396.597789a44.642824 44.642824 0 1 0-63.128314-63.128314l-330.254607 330.254607V41.565611a40.463496 40.463496 0 1 0-80.926991 0v676.437422l-330.254607-330.254607a44.642824 44.642824 0 1 0-63.128314 63.128314L488.806044 847.474529z m522.82519 95.569253H40.463496a40.405044 40.405044 0 0 0 0 80.810088h971.167738a40.405044 40.405044 0 0 0 0-80.810088z"></path>
    </symbol>
    <symbol id="icon-praise-line" viewBox="0 0 1033 1024">
      <path d="M290.445428 327.699711c-4.45146 2.299647-13.436509 6.734681-21.041771 10.512673l-12.467372 6.241899-11.662496-7.555983a97.505037 97.505037 0 0 0-52.103433-16.426051h-96.913699a95.862432 95.862432 0 0 0-96.207379 95.271094v512.821302a95.82958 95.82958 0 0 0 96.207379 95.271094h96.913699a93.431376 93.431376 0 0 0 77.596664-41.065126l9.510683-13.797883 16.426051 3.942252c26.199551 6.40616 68.135258 16.09753 124.837985 28.90985a949.031505 949.031505 0 0 0 192.841835 22.010907H791.078601c54.846583 0 93.546359-20.532563 114.982355-60.940648a1086.451845 1086.451845 0 0 0 126.956946-518.077638c0-57.491177-47.405582-97.07796-91.542381-109.561758-31.866538-8.213025-101.102342-9.85563-196.948347-11.991017l-76.479692-1.806866 3.465896-26.610202a612.198909 612.198909 0 0 0 3.597305-79.502085C675.110683 108.740456 595.148669 0 516.632146 0a96.388065 96.388065 0 0 0-96.223805 94.614052c-1.823292 144.713507-82.212384 208.282323-129.962913 233.085659zM226.186718 928.400385a33.032788 33.032788 0 0 1-33.049214 32.852101h-96.913699a33.016362 33.016362 0 0 1-33.049214-32.852101V415.743343a33.016362 33.016362 0 0 1 33.049214-32.852101h96.913699a33.016362 33.016362 0 0 1 33.049214 32.852101v512.657042zM483.402246 95.271094a32.999936 32.999936 0 0 1 33.049214-32.687841c36.777927 0 95.271094 69.974976 95.271094 152.926532 0 76.873917-3.36734 90.179018-29.566892 167.381457 304.440423 0 318.533975 3.942252 344.142188 10.841193l4.254348 1.149824a50.345845 50.345845 0 0 1 39.208983 49.935194c0 6.40616-0.098556 8.541546-0.279243 11.333975l-0.312095 6.406159c-13.239397 315.872955-114.1282 464.035932-118.4154 470.113571-7.983061 14.290664-21.206031 28.745589-59.692268 28.745589H614.334296a908.804107 908.804107 0 0 1-179.158935-20.532563c-80.487648-18.397177-115.278024-26.610202-131.934039-30.716715l-18.627142-4.599294 4.927816-507.729227 13.994995-6.570421C463.54315 317.67982 482.597369 159.825473 483.402246 95.271094z"></path>
    </symbol>
    <symbol id="icon-arrow-down-new" viewBox="0 0 1024 1024">
      <path d="M511.872 676.8c-0.003 0-0.006 0-0.008 0-9.137 0-17.379-3.829-23.21-9.97l-251.277-265.614c-5.415-5.72-8.743-13.464-8.744-21.984 0-17.678 14.33-32.008 32.008-32.008 9.157 0 17.416 3.845 23.25 10.009l228.045 241.103 228.224-241.088c5.855-6.165 14.113-10.001 23.266-10.001 8.516 0 16.256 3.32 21.998 8.736 12.784 12.145 13.36 32.434 1.264 45.233l-251.52 265.6c-5.844 6.155-14.086 9.984-23.223 9.984-0.025 0-0.051 0-0.076 0z"></path>
    </symbol>
    <symbol id="icon-fenxiang1" viewBox="0 0 1024 1024">
      <path d="M820.691478 1024H203.308522c-42.622145 0-77.185855-34.801159-77.185855-77.734957V388.645101c0-42.933797 34.56371-77.720116 77.185855-77.720115h128.623304v51.808463H203.308522a25.822609 25.822609 0 0 0-25.733565 25.911652v557.619942a25.822609 25.822609 0 0 0 25.733565 25.911653h617.382956a25.822609 25.822609 0 0 0 25.733565-25.911653V388.645101a25.822609 25.822609 0 0 0-25.733565-25.911652h-128.623304v-51.808463h128.623304c42.622145 0 77.171014 34.786319 77.171015 77.720115v557.619942c0 42.933797-34.54887 77.734957-77.171015 77.734957z m-140.198956-770.344812l-142.766377-151.04742v622.859131h-51.45229V102.340638l-142.766377 151.31455-37.309217-35.750956L476.493913 37.561507l-1.79571-1.81055L511.99258 0l37.309217 35.750957-1.810551 1.81055 170.310493 180.342725-37.309217 35.750956z"></path>
    </symbol>
    <symbol id="icon-xingzhuang8" viewBox="0 0 1212 1024">
      <path d="M608.820484 64.179444C661.042051 24.029735 725.901346 15.406979 790.194773 7.053684a825.143881 825.143881 0 0 1 264.961132 8.083834 526.203701 526.203701 0 0 1 86.038939 23.982041 170.703628 170.703628 0 0 1 50.254502 32.604797A77.470076 77.470076 0 0 1 1212.575098 132.08365q0.242515 284.955148 0 569.371374c0 86.227563 0.242515 172.724586-0.188622 258.952149a59.281449 59.281449 0 0 1-22.904197 52.814382 56.047916 56.047916 0 0 1-58.634742 3.233533 199.401238 199.401238 0 0 0-45.538932-15.628745 1168.518203 1168.518203 0 0 0-241.491067-11.85629c-52.167675 1.886228-104.146728 9.970062-156.287457 15.898207a34.814378 34.814378 0 0 0-16.841321 6.197606 70.706601 70.706601 0 0 1-46.212584 11.856289c-20.667669-0.808383-41.362284-1.347306-61.976061-2.42515a15.197608 15.197608 0 0 1-7.62575-2.155689c-44.434141-26.676652-94.63475-23.443119-142.949131-27.215574a1076.308604 1076.308604 0 0 0-141.386256-2.155689c-54.080849 2.694611-108.053914 8.892217-161.838357 15.898207a303.440182 303.440182 0 0 0-45.107794 16.976051 49.580848 49.580848 0 0 1-58.09582-33.143719 183.826385 183.826385 0 0 1-5.389223-39.880248Q0 546.649603 0 144.748323c0-60.089833 18.862279-82.455107 70.059895-104.820381A478.02405 478.02405 0 0 1 209.694654 6.784223a874.347484 874.347484 0 0 1 265.015024 8.083834 509.092919 509.092919 0 0 1 72.296422 18.862279 628.033063 628.033063 0 0 1 61.814384 30.449108zM578.748621 921.604769v-15.628745l-0.323353-312.574915q0-230.389269 0.538922-461.047998a31.203599 31.203599 0 0 0-15.332338-30.179647 172.185664 172.185664 0 0 0-41.901206-19.670663 924.925339 924.925339 0 0 0-114.359305-21.826351 778.742674 778.742674 0 0 0-272.398259 14.820362 346.122825 346.122825 0 0 0-64.886241 26.407191 30.529946 30.529946 0 0 0-16.167668 30.718569q0.458084 387.215648 0.242515 774.970219c0 3.502995 0.296407 7.275451 0.377245 8.622756a341.137794 341.137794 0 0 1 40.41917-22.904197A502.275552 502.275552 0 0 1 268.329396 862.32332c45.808393-1.347306 91.886246 0.808383 137.748531 3.233534a443.344402 443.344402 0 0 1 122.497031 23.71258 97.006008 97.006008 0 0 1 50.173663 32.335335zM1022.093024 64.179444v492.036029a11.640721 11.640721 0 0 1-2.694612 1.347306c-39.476056-40.688631-78.952112-81.646723-119.506012-123.413199-40.149709 41.497014-79.625765 82.455107-119.074875 123.413199-0.916168-0.269461-1.832336-0.808383-2.694611-1.077845V63.1016a410.739605 410.739605 0 0 0-107.029962 26.676652 154.589852 154.589852 0 0 0-25.248508 15.359284 27.808389 27.808389 0 0 0-11.505991 23.982041q0.242515 391.257565 0.161677 782.784592a10.185631 10.185631 0 0 0 0.592814 4.041917 345.314442 345.314442 0 0 1 39.772464-22.634736A502.84142 502.84142 0 0 1 843.655861 862.32332a829.94029 829.94029 0 0 1 211.338367 12.664673 188.622793 188.622793 0 0 1 104.308404 45.00001v-12.664674c-0.242515-54.431149-0.700599-109.131759-0.700598-163.562907 0-68.98205 0.619761-137.9641 0.673652-206.676689 0-132.844339-0.404192-265.688677 0.511977-398.533016a43.113781 43.113781 0 0 0-25.787431-43.113781 350.46115 350.46115 0 0 0-111.907208-31.257492z"></path>
    </symbol>
    <symbol id="icon-xingzhuang9" viewBox="0 0 1170 1024">
      <path d="M1066.790472 74.786141H1036.766305v59.243789h30.097308a42.220342 42.220342 0 0 1 44.908254 38.764454v753.164094a42.238627 42.238627 0 0 1-44.908254 38.947305H103.420639a42.183772 42.183772 0 0 1-44.8534-38.947305V172.794384a42.165487 42.165487 0 0 1 44.8534-38.764454h449.320254V74.786141H103.347498A100.952148 100.952148 0 0 0 0 172.794384v753.164094A100.842437 100.842437 0 0 0 103.347498 1023.966721h963.442974a100.897292 100.897292 0 0 0 103.420639-98.008243V172.794384a101.007003 101.007003 0 0 0-103.420639-98.008243zM239.973915 419.277802h222.365345a29.530469 29.530469 0 0 0 0-59.060938H239.973915a29.530469 29.530469 0 0 0 0 59.060938z m0 123.973114a29.621894 29.621894 0 0 0 0 59.243789h296.456651a29.621894 29.621894 0 0 0 0-59.243789H239.973915z m-29.256192 212.838797a29.256192 29.256192 0 0 0 29.256192 29.439043H610.540157a29.530469 29.530469 0 0 0 0-59.060938H239.973915a29.384188 29.384188 0 0 0-29.256192 29.621895z m449.320254-210.461732v0.914256h0.511984l139.936023 235.695197 139.917739-235.695197h0.475413v-0.914256l0.457128-0.731404h-0.457128V140.795424a140.429722 140.429722 0 1 0-280.841159 0v404.101153h-0.420557z m140.448007 159.994801l-72.043373-121.413197h144.050176zM718.605217 140.795424a81.917338 81.917338 0 0 1 163.834675 0v404.101153H718.605217V140.795424z"></path>
    </symbol>
    <symbol id="icon-xingzhuang10" viewBox="0 0 1749 1024">
      <path d="M874.666667 938.24c321.536 0 756.565333-320 787.456-408.32-11.818667-96.853333-422.4-445.866667-787.456-445.866667-347.861333 0-787.456 278.186667-787.456 447.573334 9.088 84.053333 431.402667 406.613333 787.456 406.613333m0 85.76C509.568 1024 0 689.066667 0 533.333333 0 286.293333 513.152 0 874.666667 0 1270.656 0 1749.333333 375.466667 1749.333333 533.333333 1749.333333 664.32 1226.154667 1024 874.666667 1024z m0-299.52a213.333333 213.333333 0 1 0-218.88-213.333333 216.277333 216.277333 0 0 0 218.88 213.333333m0 86.186667a298.666667 298.666667 0 1 1 306.090666-298.666667 302.677333 302.677333 0 0 1-306.090666 298.666667z"></path>
    </symbol>
    <symbol id="icon-xingzhuang" viewBox="0 0 1157 1024">
      <path d="M420.997565 647.791304a37.843478 37.843478 0 0 1-17.363478 4.006957 38.600348 38.600348 0 0 1-33.658435-19.812174l-2.515478-5.565217-105.382957-231.735653a20.279652 20.279652 0 0 1-1.825391-8.236521 19.277913 19.277913 0 0 1 19.277913-19.144348 18.921739 18.921739 0 0 1 11.553391 3.784348l124.304696 88.820869a59.013565 59.013565 0 0 0 31.632696 9.349565 58.301217 58.301217 0 0 0 19.789913-3.561739L1051.581217 204.8C946.732522 80.806957 774.121739 0 578.782609 0 259.116522 0 0 216.375652 0 483.506087c0 145.808696 77.913043 276.925217 199.969391 365.523478a38.845217 38.845217 0 0 1 16.205913 31.610435 44.521739 44.521739 0 0 1-2.048 12.243478c-9.728 36.507826-25.33287 94.831304-26.045217 97.725218a52.624696 52.624696 0 0 0-3.116522 14.024347 19.322435 19.322435 0 0 0 19.277913 19.366957 22.038261 22.038261 0 0 0 11.130435-3.561739l126.70887-73.46087a60.104348 60.104348 0 0 1 30.72-8.904348 54.00487 54.00487 0 0 1 17.029565 2.671305 687.86087 687.86087 0 0 0 188.928 26.490435c319.643826 0 578.782609-216.598261 578.782609-483.728696a419.127652 419.127652 0 0 0-65.914435-223.944348L425.182609 645.342609z"></path>
    </symbol>
    <symbol id="icon-xingzhuang1" viewBox="0 0 1024 1024">
      <path d="M1023.360799 700.990429V196.873908A196.845499 196.845499 0 0 0 826.699958 0h-629.399916A196.845499 196.845499 0 0 0 0.639201 196.873908v630.252184a196.746067 196.746067 0 0 0 196.660841 196.873908h629.399916a196.831294 196.831294 0 0 0 193.592676-162.072964C968.133833 839.341934 742.11236 741.473159 624.357331 685.365515c-89.48814 108.66417-183.507505 173.862672-324.941379 173.862672s-235.794146-87.35747-224.558413-194.033014c7.457345-70.170065 55.52526-184.658066 264.004217-165.055903 109.871549 10.227216 160.141157 30.823693 249.842364 60.368984a711.33128 711.33128 0 0 0 57.130365-139.203773H248.436122v-39.346373h196.646636V311.077819H205.183521v-43.465668h239.757192v-101.98807a19.17603 19.17603 0 0 1 19.886253-16.051047H563.13608v118.181162h255.680399v43.465668h-255.680399v70.880289h208.635206a803.163157 803.163157 0 0 1-84.743848 212.640865C747.666306 616.615897 1023.360799 700.990429 1023.360799 700.990429z m-739.56976 90.482452c-149.459398 0-173.138244-94.459703-165.24056-133.94812s51.13608-90.482452 134.274823-90.482453c95.553447 0 181.021723 24.431683 283.734221 74.431405-72.187099 94.033569-160.72354 149.999168-252.768484 149.999168z"></path>
    </symbol>
    <symbol id="icon-xingzhuang2" viewBox="0 0 1024 1024">
      <path d="M289.714302 291.475655a49.459953 49.459953 0 0 0-31.604939 10.511306 33.934471 33.934471 0 0 0 0 54.261062 50.454266 50.454266 0 0 0 31.604939 10.511306 36.121959 36.121959 0 0 0 38.124788-38.067971 36.050936 36.050936 0 0 0-10.539714-27.272576 38.35206 38.35206 0 0 0-27.585074-9.943127z m312.114745 220.027189a27.997004 27.997004 0 0 0-21.065224 9.516992 30.298127 30.298127 0 0 0-9.019836 21.164656 29.971425 29.971425 0 0 0 9.019836 21.02261 28.139048 28.139048 0 0 0 21.065224 9.659038 41.732723 41.732723 0 0 0 27.102122-9.090859 26.61917 26.61917 0 0 0 11.051075-21.164655 28.224275 28.224275 0 0 0-11.051075-21.59079 39.772507 39.772507 0 0 0-27.102122-9.516992zM1023.360799 155.822999A156.036066 156.036066 0 0 0 867.79348 0h-711.643778A156.05027 156.05027 0 0 0 0.639201 155.822999v712.496047a156.05027 156.05027 0 0 0 155.567319 155.680954h711.643778A156.036066 156.036066 0 0 0 1023.360799 868.319046V155.822999zM389.060341 679.399639a671.033208 671.033208 0 0 1-106.405659-15.198779l-106.40566 53.26675 30.127674-91.476765q-121.433985-85.2268-121.433985-205.964766a231.731669 231.731669 0 0 1 88.834734-182.953531 322.043668 322.043668 0 0 1 215.282896-75.283673 340.907199 340.907199 0 0 1 199.217645 60.795117 243.194673 243.194673 0 0 1 106.888611 152.271883c-10.710168-0.710223-20.411819-0.994313-29.104952-0.994313a257.953114 257.953114 0 0 0-182.683645 70.31211 224.118075 224.118075 0 0 0-75.283673 169.885421 236.802663 236.802663 0 0 0 9.019836 64.204189c-10.710168 0.710223-20.070911 0.994313-28.096435 0.994313z m448.633875 106.391455l22.10215 76.420031-83.309197-46.164517a391.773394 391.773394 0 0 1-91.348925 16.051048 269.884866 269.884866 0 0 1-182.669441-64.914413 199.785823 199.785823 0 0 1 0-312.498266 286.930226 286.930226 0 0 1 363.847413 0.568179q77.769455 65.198502 77.783659 155.680954 0 95.454016-106.405659 174.856984z m-69.246775-274.28825a28.636205 28.636205 0 0 0-20.582272 9.516992 29.531086 29.531086 0 0 0-9.545402 21.164656 29.232792 29.232792 0 0 0 9.545402 21.02261 28.820863 28.820863 0 0 0 20.582272 9.659038 41.192953 41.192953 0 0 0 27.599278-9.090859 27.073713 27.073713 0 0 0 10.52551-21.164655 28.74984 28.74984 0 0 0-10.52551-21.59079 39.388986 39.388986 0 0 0-27.599278-9.516992zM502.497212 366.759329a36.136163 36.136163 0 0 0 38.124788-38.067971 36.079345 36.079345 0 0 0-10.539714-27.272576 38.35206 38.35206 0 0 0-27.585074-9.943127 49.459953 49.459953 0 0 0-31.604938 10.511306 33.934471 33.934471 0 0 0 0 54.261062 50.440061 50.440061 0 0 0 31.604938 10.511306z"></path>
    </symbol>
    <symbol id="icon-xingzhuangkaobei" viewBox="0 0 1024 1024">
      <path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m276.16 380.96L441.92 727.36a19.008 19.008 0 0 1-26.56-1.76l-23.2-23.2-155.2-155.2a19.792 19.792 0 0 1 0-28.16l42.4-42.4a20.096 20.096 0 0 1 28.16 0l121.92 122.08 288.16-288.16a18.864 18.864 0 0 1 26.56 1.76l42.24 42.24a18.672 18.672 0 0 1 1.76 26.4z"></path>
    </symbol>
    <symbol id="icon-touxiang" viewBox="0 0 1024 1024">
      <path d="M914.272 802.848q0 68.576-41.728 108.288t-110.848 39.712H262.272q-69.152 0-110.848-39.712t-41.728-108.288q0-30.272 2.016-59.136t8-62.272 15.136-62.016 24.576-55.712 35.424-46.272 48.864-30.56 63.712-11.424q5.152 0 24 12.288t42.56 27.424 61.728 27.424T512 554.88t76.288-12.288 61.728-27.424 42.56-27.424 24-12.288q34.848 0 63.712 11.424t48.864 30.56 35.424 46.272 24.576 55.712 15.136 62.016 8 62.272 2.016 59.136zM731.424 292.576q0 90.848-64.288 155.136T512 512t-155.136-64.288-64.288-155.136 64.288-155.136T512 73.152t155.136 64.288 64.288 155.136z"></path>
    </symbol>
    <symbol id="icon-xin" viewBox="0 0 1164 1024">
      <path d="M1123.1869446875 325.13635625v-1.3175409375l0.338795625-6.211261875c0-2.2586409375 0.15057562500000002-4.5172809375 0.2070421875-6.775921875v-1.69398-9.7874428125c0-1.1293199999999999 0-3.5761809374999998-0.2070421875-6.964141875a235.0868446875 235.0868446875 0 0 0-11.7637528125-69.07675875c-1.8822009375-5.458381875000001-3.9526209374999994-10.728542812499999-6.0230418750000005-15.9987046875l-0.22586343749999999-0.5646599999999999a267.4042275 267.4042275 0 0 0-55.826068125-90.5338453125c-1.8822009375-2.0704209375-3.500893125-3.5761809374999998-4.4796365625000005-4.5172809375a11.293202812499999 11.293202812499999 0 0 0-1.4681165624999999-1.5057609374999998 222.58903312500001 222.58903312500001 0 0 0-48.9372140625-37.8322303125 220.330393125 220.330393125 0 0 0-23.791014375000003-12.798963749999999A231.924748125 231.924748125 0 0 0 914.7520587500001 39.982977500000004a8.3381484375 8.3381484375 0 0 0-2.4656821875-0.5646609375 269.8887328125 269.8887328125 0 0 0-138.98168625 3.5761809374999998 281.78424 281.78424 0 0 0-56.8989225 22.3981865625c-6.154795312499999 3.0115209375000003-12.328413750000001 6.211261875-18.596140312499998 9.5992228125-1.0540321875 0.75288-2.0704209375 1.31754-3.0679875 2.0704200000000004-0.39526218750000003 0.18822-2.6350809375 1.8822009375-6.135973125 4.517281875a310.5630853125 310.5630853125 0 0 0-70.82720625 62.677276875c-1.76926875 2.0704209375-3.5197153125000002 3.9526209374999994-5.194873125 6.0230418750000005l-11.293202812499999 13.17540375c-4.536103125 5.458381875000001-9.411002812500001 11.1049828125-14.3611903125 16.9398046875l-9.109850625 10.728542812499999-9.109850625-10.728542812499999c-4.9313653125000005-5.834821875-9.82508625-11.4814228125-14.361189375-16.9398046875l-11.29320375-13.17540375c-1.67515875-2.0704209375-3.4256053125-3.9526209374999994-5.194873125-6.0230418750000005a310.1866453125 310.1866453125 0 0 0-70.808383125-62.677276875c-3.500893125-2.6350809375-5.740711875000001-4.3290609374999995-6.1359740625-4.517281875-0.9975665625-0.75288-2.013954375-1.31754-3.0679865625-2.0704200000000004q-9.411002812500001-5.0819409375-18.614963437500002-9.5992228125A281.59601999999995 281.59601999999995 0 0 0 382.3528203125 42.99449750000002 269.8887328125 269.8887328125 0 0 0 243.3711340625 39.41831656249997a8.2063940625 8.2063940625 0 0 0-2.465683125 0.5646609375A231.924748125 231.924748125 0 0 0 184.64647718749995 59.55786218750001a269.1546740625 269.1546740625 0 0 0-72.65293968750001 50.6311940625 10.182705 10.182705 0 0 0-1.4681165624999999 1.5057609374999998 127.04853468750001 127.04853468750001 0 0 0-4.4984596875000005 4.5172809375A267.2724740625 267.2724740625 0 0 0 50.21971625000003 206.7459434375l-0.225864375 0.5646599999999999c-2.0704209375 5.270161875-4.1031975 10.5403228125-6.0230409375 15.9987046875a234.3904303125 234.3904303125 0 0 0-11.763753750000001 69.07675875c-0.1693978125 3.3879609375-0.2070421875 5.834821875-0.2070421875 6.964141875v11.4814228125c0 2.2586409375 0.1129321875 4.5172809375 0.2070421875 6.775921875s0.2070421875 4.140840937499999 0.319974375 6.211261875v1.3175409375a370.0782665625 370.0782665625 0 0 0 58.611723749999996 176.73862875 479.73526875 479.73526875 0 0 0 47.996113124999994 68.70031875 1325.5585378125 1325.5585378125 0 0 0 159.40356281249998 175.79752875h0.11293125l255.5463646875 236.4043846875a34.7830659375 34.7830659375 0 0 0 23.376930937500003 9.2227828125h0.22586343749999999a34.820709375 34.820709375 0 0 0 23.376930937500003-9.2227828125l255.5463646875-236.4043846875h0.1129321875a1325.5585378125 1325.5585378125 0 0 0 159.40356187499998-175.79752875 481.2974953125 481.2974953125 0 0 0 47.996113124999994-68.70031875 370.51117218750005 370.51117218750005 0 0 0 58.950520312500004-176.73862875zM810.2711084375001 694.2358775l-18.2949890625 15.6222646875-25.5791053125 23.9039465625c-62.6960990625 58.5364359375-147.73391906249998 137.4006375-188.370628125 175.0446478125-40.6367090625-37.6440103125-125.6745290625-116.508211875-188.370628125-175.0446478125l-25.5791053125-23.9039465625-18.2949890625-15.6222646875c-39.52621125-36.891130312499996-98.34497718749999-103.8974690625-98.34497625-103.897468125l-22.79344875-26.727247499999997a1448.9932481249998 1448.9932481249998 0 0 1-30.1152084375-36.1382503125c-11.293202812499999-15.245823750000001-20.704205625-28.7976675-28.552981875-40.65553125a487.301715 487.301715 0 0 1-45.41749875-82.2521625 307.11865875 307.11865875 0 0 1-18.031480312499998-79.2406415625c-0.6399478125-8.093461875-0.9599221874999999-16.5633646875-0.82816875-25.221487500000002v-0.9411a216.1519078125 216.1519078125 0 0 1 13.438911562500001-66.62989875000001 229.34613375 229.34613375 0 0 1 44.0246709375-70.39429875c0.6399478125-0.5646599999999999 0.9599221874999999-0.9411 1.5810478125-1.5057609374999998s1.2798965625-1.31754 1.8822009375-2.0704209375a187.260129375 187.260129375 0 0 1 35.159505-26.3508065625 1.22343 1.22343 0 0 1 0.63994875-0.37644l2.0704200000000004-1.1293209375a243.048553125 243.048553125 0 0 1 54.5838159375-21.645305625 228.423855 228.423855 0 0 1 23.18871-3.9526209374999994 231.002469375 231.002469375 0 0 1 128.5731178125 22.586405624999998 238.64420437500002 238.64420437500002 0 0 1 21.2876878125 12.23430375 448.7354259375 448.7354259375 0 0 1 57.538869375000004 50.8194140625c3.46324875 3.9526209374999994 9.411002812500001 10.728542812499999 16.3186790625 19.010225625l13.6271315625 15.998703749999999c17.5421090625 20.704205625 35.5359459375 42.16129125 35.761809375 42.5377321875a35.366548124999994 35.366548124999994 0 0 0 3.764401875 3.7644009375000005 35.761810312499996 35.761810312499996 0 0 0 16.9398046875 8.093461875c0.9411 0.18822 1.8822009375 0.18822 2.8421221875000002 0.37644h5.7971775c0.9411-0.18822 1.8822009375-0.18822 2.8421231249999996-0.37644a35.761810312499996 35.761810312499996 0 0 0 16.9398046875-8.093461875 35.366548124999994 35.366548124999994 0 0 0 3.7644009375000005-3.7644009375000005c0.3011521875-0.37644 18.2949890625-21.833525625 35.761810312499996-42.5377321875l13.6271315625-15.998703749999999c6.9264975-8.281681874999999 12.855429375-15.057603750000002 16.299855937500002-19.010225625a449.9588559375 449.9588559375 0 0 1 57.5576925-50.8194140625 236.0091234375 236.0091234375 0 0 1 21.2876878125-12.23430375 231.002469375 231.002469375 0 0 1 128.5731178125-22.586405624999998 227.106315 227.106315 0 0 1 23.1698878125 3.9526209374999994 248.45046843749998 248.45046843749998 0 0 1 54.583815 21.457085624999998 13.64595375 13.64595375 0 0 0 2.089243125 1.3175409375 1.1104987499999999 1.1104987499999999 0 0 1 0.6211256249999999 0.37644 187.4107059375 187.4107059375 0 0 1 35.178328125 26.3508065625c0.6399478125 0.75288 1.2798965625 1.31754 1.8822 2.0704209375s0.9411 0.9411 1.5810487500000001 1.5057609374999998a229.34613375 229.34613375 0 0 1 44.02467 70.39429875 216.8106778125 216.8106778125 0 0 1 13.438911562500001 66.62989875000001v0.9411c0.1129321875 8.6581228125-0.18822 17.128024687499998-0.84699 25.221487500000002a305.5564321875 305.5564321875 0 0 1-18.03148125 79.2406415625 485.6077340625 485.6077340625 0 0 1-45.4174978125 82.2521625c-7.811131874999999 11.857862812499999-17.2786003125 25.409706562500002-28.534160625 40.65553125-8.41343625 10.3521028125-18.31381125 22.3981865625-30.115207500000004 36.1382503125l-22.79344875 26.727247499999997s-58.36703812499999 67.00633875-97.9308928125 103.897468125z"></path>
    </symbol>
    <symbol id="icon-xin1" viewBox="0 0 1164 1024">
      <path d="M1123.1869446875 325.13635625v-1.3175409375l0.338795625-6.211261875c0-2.2586409375 0.15057562500000002-4.5172809375 0.2070421875-6.775921875v-1.69398-9.7874428125c0-1.1293199999999999 0-3.5761809374999998-0.2070421875-6.964141875a235.0868446875 235.0868446875 0 0 0-11.7637528125-69.07675875c-1.8822009375-5.458381875000001-3.9526209374999994-10.728542812499999-6.0230418750000005-15.9987046875l-0.22586343749999999-0.5646599999999999a267.4042275 267.4042275 0 0 0-55.826068125-90.5338453125c-1.8822009375-2.0704209375-3.500893125-3.5761809374999998-4.4796365625000005-4.5172809375a11.293202812499999 11.293202812499999 0 0 0-1.4681165624999999-1.5057609374999998 222.58903312500001 222.58903312500001 0 0 0-48.9372140625-37.8322303125 220.330393125 220.330393125 0 0 0-23.791014375000003-12.798963749999999A231.924748125 231.924748125 0 0 0 914.7520587500001 39.982977500000004a8.3381484375 8.3381484375 0 0 0-2.4656821875-0.5646609375 269.8887328125 269.8887328125 0 0 0-138.98168625 3.5761809374999998 281.78424 281.78424 0 0 0-56.8989225 22.3981865625c-6.154795312499999 3.0115209375000003-12.328413750000001 6.211261875-18.596140312499998 9.5992228125-1.0540321875 0.75288-2.0704209375 1.31754-3.0679875 2.0704200000000004-0.39526218750000003 0.18822-2.6350809375 1.8822009375-6.135973125 4.517281875a310.5630853125 310.5630853125 0 0 0-70.82720625 62.677276875c-1.76926875 2.0704209375-3.5197153125000002 3.9526209374999994-5.194873125 6.0230418750000005l-11.293202812499999 13.17540375c-4.536103125 5.458381875000001-9.411002812500001 11.1049828125-14.3611903125 16.9398046875l-9.109850625 10.728542812499999-9.109850625-10.728542812499999c-4.9313653125000005-5.834821875-9.82508625-11.4814228125-14.361189375-16.9398046875l-11.29320375-13.17540375c-1.67515875-2.0704209375-3.4256053125-3.9526209374999994-5.194873125-6.0230418750000005a310.1866453125 310.1866453125 0 0 0-70.808383125-62.677276875c-3.500893125-2.6350809375-5.740711875000001-4.3290609374999995-6.1359740625-4.517281875-0.9975665625-0.75288-2.013954375-1.31754-3.0679865625-2.0704200000000004q-9.411002812500001-5.0819409375-18.614963437500002-9.5992228125A281.59601999999995 281.59601999999995 0 0 0 382.3528203125 42.99449750000002 269.8887328125 269.8887328125 0 0 0 243.3711340625 39.41831656249997a8.2063940625 8.2063940625 0 0 0-2.465683125 0.5646609375A231.924748125 231.924748125 0 0 0 184.64647718749995 59.55786218750001a269.1546740625 269.1546740625 0 0 0-72.65293968750001 50.6311940625 10.182705 10.182705 0 0 0-1.4681165624999999 1.5057609374999998 127.04853468750001 127.04853468750001 0 0 0-4.4984596875000005 4.5172809375A267.2724740625 267.2724740625 0 0 0 50.21971625000003 206.7459434375l-0.225864375 0.5646599999999999c-2.0704209375 5.270161875-4.1031975 10.5403228125-6.0230409375 15.9987046875a234.3904303125 234.3904303125 0 0 0-11.763753750000001 69.07675875c-0.1693978125 3.3879609375-0.2070421875 5.834821875-0.2070421875 6.964141875v11.4814228125c0 2.2586409375 0.1129321875 4.5172809375 0.2070421875 6.775921875s0.2070421875 4.140840937499999 0.319974375 6.211261875v1.3175409375a370.0782665625 370.0782665625 0 0 0 58.611723749999996 176.73862875 479.73526875 479.73526875 0 0 0 47.996113124999994 68.70031875 1325.5585378125 1325.5585378125 0 0 0 159.40356281249998 175.79752875h0.11293125l255.5463646875 236.4043846875a34.7830659375 34.7830659375 0 0 0 23.376930937500003 9.2227828125h0.22586343749999999a34.820709375 34.820709375 0 0 0 23.376930937500003-9.2227828125l255.5463646875-236.4043846875h0.1129321875a1325.5585378125 1325.5585378125 0 0 0 159.40356187499998-175.79752875 481.2974953125 481.2974953125 0 0 0 47.996113124999994-68.70031875 370.51117218750005 370.51117218750005 0 0 0 58.950520312500004-176.73862875z"></path>
    </symbol>
    <symbol id="icon-faxianwei" viewBox="0 0 1024 1024">
      <path d="M751.532699 242.420532l-305.670114 141.134766a31.824793 31.824793 0 0 0-4.782494 2.632565 151.533399 151.533399 0 0 0-69.207223 131.628279l0.087752 2.486312a151.021512 151.021512 0 0 0 145.712504 145.814882h4.884872a151.401771 151.401771 0 0 0 129.434474-73.565583 19.46636 19.46636 0 0 0 1.243156-2.340058l149.924609-294.116076a39.488484 39.488484 0 0 0-51.627536-53.675087zM583.648143 553.209523a71.986043 71.986043 0 0 1-61.031646 34.077099h-2.354683a71.986043 71.986043 0 0 1-69.382729-69.47048v-2.486312a72.220049 72.220049 0 0 1 30.932646-61.42653l199.446093-92.139795zM965.691909 275.181348a39.488484 39.488484 0 0 0-69.938492 36.563411A432.79378 432.79378 0 1 1 732.168717 139.16546a39.503109 39.503109 0 0 0 40.219752-68.007944 511.88775 511.88775 0 1 0-299.936971 951.08744c13.469961 1.170029 26.88142 1.60879 40.234377 1.60879A512.034004 512.034004 0 0 0 965.691909 275.181348z"
        fill="#888888"></path>
    </symbol>
    <symbol id="icon-wodewei" viewBox="0 0 1024 1024">
      <path d="M769.367642 662.972352a377.70549 377.70549 0 0 0 127.841168-282.677923 385.183578 385.183578 0 0 0-770.305097 0 377.302108 377.302108 0 0 0 127.996315 282.677923C100.063274 710.292202 50.261071 883.126014 46.692689 981.334096A41.54838 41.54838 0 0 0 87.030922 1023.999535h1.55147a41.579409 41.579409 0 0 0 41.734556-39.872792c0.310294-10.239705 11.325735-251.027925 210.689692-251.027925a42.944703 42.944703 0 0 0 17.841911-4.033823 388.395122 388.395122 0 0 0 306.415421 0 42.944703 42.944703 0 0 0 17.841911 4.033823c198.277928 0 210.379398 240.633073 210.689692 251.183072A41.672497 41.672497 0 0 0 935.530131 1023.999535h1.551471a41.54838 41.54838 0 0 0 40.338233-42.665439c-3.568382-98.208082-53.370585-271.041894-208.052193-318.361744zM210.527972 380.294429A301.559319 301.559319 0 1 1 512.133835 678.021616a300.038878 300.038878 0 0 1-301.605863-297.727187z"
        fill="#888888"></path>
    </symbol>
    <symbol id="icon-zhuanlanwei" viewBox="0 0 1089 1024">
      <path d="M982.593302 32.133082l-19.745864-7.254871a413.354111 413.354111 0 0 0-152.983131-24.603472 396.44711 396.44711 0 0 0-152.983131 24.603472l-113.554489 46.683513-113.554489-46.683513a404.79021 404.79021 0 0 0-152.983131-24.603472 396.510196 396.510196 0 0 0-152.983131 24.603472l-19.745864 9.778304c-56.777244 22.08004-106.126133 93.524739-103.665786 155.03342v713.65842c0 51.730378 27.158449 86.112154 74.125847 86.112155a106.804305 106.804305 0 0 0 37.01561-7.412585l19.745863-7.25487a471.913531 471.913531 0 0 1 286.315027 0l123.41165 49.206945 130.824234-46.841227a475.067822 475.067822 0 0 1 286.299255 0l19.745864 7.412585a100.038351 100.038351 0 0 0 37.031381 7.412585c41.952075 0 74.04699-34.53949 74.04699-86.112154V189.689935a176.813802 176.813802 0 0 0-106.362705-157.556853z m24.68233 883.51701a19.714321 19.714321 0 0 1-7.396813-2.365719l-19.745864-5.046866a517.713841 517.713841 0 0 0-172.77631-29.492624 464.153974 464.153974 0 0 0-172.776309 29.492624l-93.792854 36.905209-93.792853-36.905209a517.713841 517.713841 0 0 0-172.77631-29.492624 473.348733 473.348733 0 0 0-172.776309 29.492624l-19.745864 7.412585a18.783805 18.783805 0 0 1-7.396813 2.523433V189.689935a108.25528 108.25528 0 0 1 56.777245-83.746436l17.348602-7.25487c64.174058-24.603473 185.12536-24.603473 249.299418 0l106.126133 41.794361v634.958851a37.062923 37.062923 0 0 0 74.125847 0V137.959557l103.665785-41.794361c64.174058-24.603473 185.12536-24.603473 249.299418 0l19.745864 7.412585a112.071972 112.071972 0 0 1 56.777244 86.112154v725.960157z"
        fill="#888888"></path>
    </symbol>
    <symbol id="icon-faxian" viewBox="0 0 1024 1024">
      <path d="M751.532699 242.274278l-305.670114 141.28102a31.824793 31.824793 0 0 0-4.782494 2.632565 151.284768 151.284768 0 0 0-69.207223 131.482025l0.087752 2.632566a151.021512 151.021512 0 0 0 145.712504 145.814882h4.884872a151.401771 151.401771 0 0 0 129.434474-73.565583 19.46636 19.46636 0 0 0 1.243156-2.340058l149.924609-294.116076a39.488484 39.488484 0 0 0-51.627536-53.821341zM965.691909 275.181348a39.488484 39.488484 0 0 0-69.938492 36.563411A431.901633 431.901633 0 1 1 732.168717 139.019207a39.488484 39.488484 0 1 0 40.219752-67.861691 511.88775 511.88775 0 1 0-299.936971 951.08744c13.469961 1.170029 26.88142 1.60879 40.234377 1.60879A512.048629 512.048629 0 0 0 965.691909 275.181348z"
        fill="#000000"></path>
    </symbol>
    <symbol id="icon-zhuanlan" viewBox="0 0 1089 1024">
      <path d="M982.593605 32.132776l-19.74587-7.254872a488.221367 488.221367 0 0 0-306.060985 0 490.94983 490.94983 0 0 0-59.931555 24.60348c-11.040023 7.570302-19.09924 11.986311-19.09924 40.690371v709.715775a37.062935 37.062935 0 0 1-74.12587 0v-709.715775c0-34.539501-8.20116-35.643503-21.48073-43.686949a433.415538 433.415538 0 0 0-52.566282-21.606902 404.790335 404.790335 0 0 0-152.983178-24.603481 396.510318 396.510318 0 0 0-152.983178 24.603481l-19.74587 9.778306c-56.777262 22.080046-106.126166 93.524768-103.665818 155.033468v713.65864c0 51.730394 27.158457 86.112181 74.12587 86.112181a106.804338 106.804338 0 0 0 37.01562-7.412587l19.74587-7.254872a471.913676 471.913676 0 0 1 286.315115 0l123.411688 49.20696 130.824274-46.841241a475.067968 475.067968 0 0 1 286.299344 0l19.74587 7.412587a100.038381 100.038381 0 0 0 37.031392 7.412587c41.952088 0 74.047013-34.539501 74.047012-86.112181V189.689678a176.813857 176.813857 0 0 0-106.173479-157.556902z"
        fill="#000000"></path>
    </symbol>
    <symbol id="icon-wode" viewBox="0 0 1024 1024">
      <path d="M769.367642 662.972352a377.70549 377.70549 0 0 0 127.841168-282.677923 385.183578 385.183578 0 0 0-770.305097 0 377.302108 377.302108 0 0 0 127.996315 282.677923C100.063274 710.292202 50.261071 883.126014 46.692689 981.334096A41.54838 41.54838 0 0 0 87.030922 1023.999535h1.55147a41.579409 41.579409 0 0 0 41.734556-39.872792c0.310294-10.239705 11.325735-251.027925 210.689692-251.027925a42.944703 42.944703 0 0 0 17.841911-4.033823 388.395122 388.395122 0 0 0 306.415421 0 42.944703 42.944703 0 0 0 17.841911 4.033823c198.277928 0 210.379398 240.633073 210.689692 251.183072A41.672497 41.672497 0 0 0 935.530131 1023.999535h1.551471a41.54838 41.54838 0 0 0 40.338233-42.665439c-3.568382-98.208082-53.370585-271.041894-208.052193-318.361744z"
        fill="#FF5A05"></path>
    </symbol>
    <symbol id="icon-xingzhuang3" viewBox="0 0 1024 1024">
      <path d="M871.298246 913.156491A110.753684 110.753684 0 0 1 760.598456 1024H263.401544A110.753684 110.753684 0 0 1 152.701754 913.156491V110.843509A110.753684 110.753684 0 0 1 263.401544 0h497.178947a110.753684 110.753684 0 0 1 110.69979 110.843509v802.312982zM807.415018 110.843509a46.852491 46.852491 0 0 0-46.816562-46.888421H263.401544a46.852491 46.852491 0 0 0-46.816562 46.888421v802.312982a46.852491 46.852491 0 0 0 46.816562 46.888421h497.178947a46.852491 46.852491 0 0 0 46.816562-46.888421V110.843509z m31.205052 705.122807H183.906807a15.988772 15.988772 0 0 1 0-31.977544H838.602105a15.988772 15.988772 0 0 1 0 31.977544z m0-640.089825H183.906807a15.988772 15.988772 0 0 1 0-31.977544H838.602105a15.988772 15.988772 0 0 1 0 31.977544zM551.936 884.053333a27.863579 27.863579 0 0 1-27.953404 27.845614h-7.976421a27.863579 27.863579 0 0 1-27.953403-27.845614v-8.08421a28.007298 28.007298 0 0 1 27.953403-28.025263h7.976421a28.007298 28.007298 0 0 1 27.953404 28.025263v8.08421z m32.336842-423.79228a18.324211 18.324211 0 0 1-5.389474-0.898246 16.042667 16.042667 0 0 1-9.772912-20.48l4.329544-12.395789a16.006737 16.006737 0 0 1 30.127158 10.778947l-4.329544 12.21614a15.934877 15.934877 0 0 1-15.072561 10.778948z m-60.883088 173.720701a18.108632 18.108632 0 0 1-5.281684-0.898245 15.916912 15.916912 0 0 1-9.790877-20.300351l45.289544-129.347369a15.970807 15.970807 0 0 1 30.127158 10.599299l-45.289544 129.167719a15.934877 15.934877 0 0 1-15.054597 10.778947z m-64.673684-120.72421a13.779088 13.779088 0 0 1-5.389474-0.898246 15.916912 15.916912 0 0 1-9.772912-20.300351l66.218667-188.990877a15.934877 15.934877 0 0 1 20.354245-9.880702 16.168421 16.168421 0 0 1 9.772913 20.48l-66.218667 188.990878a15.755228 15.755228 0 0 1-15.054596 10.599298z m-31.097263 88.746667a18.108632 18.108632 0 0 1-5.281684-0.898246 16.042667 16.042667 0 0 1-9.790877-20.48l9.754947-27.665965a15.970807 15.970807 0 1 1 30.127158 10.599298l-9.754947 27.665965a15.934877 15.934877 0 0 1-15.054597 10.778948z"></path>
    </symbol>
    <symbol id="icon-xingzhuang4" viewBox="0 0 1024 1024">
      <path d="M312.768 222.624a64 64 0 1 0 63.808 64 62.24 62.24 0 0 0-63.808-64z m288.288 0a64 64 0 1 0 63.808 64 62.256 62.256 0 0 0-63.808-64z m-14.4 353.504a48 48 0 0 0 0 95.488 48 48 0 1 0-0.032-95.488z m191.888 0a48 48 0 0 0 0 95.488 48 48 0 1 0-0.032-95.488zM1024 683.36A285.12 285.12 0 0 0 913.424 464c0.336-3.952 0.512-7.664 0.512-11.088 0-330.544-235.552-452.896-459.2-452.896C204.8 0 0 178.656 0 405.616c0 130.976 68.064 238.528 181.968 322l1.104 106.944 112.464-47.04a579.088 579.088 0 0 0 83.456 14.08c51.008 106.4 168.96 181.12 309.264 181.12a482.144 482.144 0 0 0 118.608-20.64L915.28 1024l-29.728-103.04C964.8 858.72 1024 776.32 1024 683.36z m-672.096 0a271.68 271.68 0 0 0 4.8 51.2 1094.432 1094.432 0 0 1-36.512-7.264l-11.744-2.464-19.424-4.048-18.32 7.664-24.672 10.32-0.112-11.776-0.336-32-25.84-18.928a416.592 416.592 0 0 1-116.208-123.76A286.176 286.176 0 0 1 64 405.616a318.896 318.896 0 0 1 112-240 395.2 395.2 0 0 1 124.56-74.176A439.12 439.12 0 0 1 454.784 64a495.392 495.392 0 0 1 147.072 21.392 365.088 365.088 0 0 1 125.536 66.4 315.056 315.056 0 0 1 87.696 116.8 435.04 435.04 0 0 1 34.064 153.856 358.88 358.88 0 0 0-160.976-38.4C500.08 384 351.904 518.4 351.904 683.36z m494.176 187.2l-29.696 23.2-0.464-0.32-25.28 6.72a433.776 433.776 0 0 1-102.4 18.56 308.672 308.672 0 0 1-109.376-19.52 273.424 273.424 0 0 1-86.624-51.84 214.288 214.288 0 0 1 0-327.856 273.6 273.6 0 0 1 86.624-52.032A309.744 309.744 0 0 1 688.176 448a292.576 292.576 0 0 1 104.624 19.376 288 288 0 0 1 87.68 52.544 243.6 243.6 0 0 1 58.592 75.328A198.24 198.24 0 0 1 960 683.36a184.144 184.144 0 0 1-29.936 96.8 353.104 353.104 0 0 1-83.984 90.4z"></path>
    </symbol>
    <symbol id="icon-xingzhuang5" viewBox="0 0 1102 1024">
      <path d="M26.385044 538.385241H1012.083018L564.324889 979.842464a25.321766 25.321766 0 0 0 0 36.624015 26.503186 26.503186 0 0 0 37.017822 0l489.107825-482.806918a25.164243 25.164243 0 0 0 12.208005-21.265557 25.833714 25.833714 0 0 0-6.694713-16.539879l0.393807-0.393806-1.18142-1.18142h-0.393807L601.342711 7.533914a26.503186 26.503186 0 0 0-37.017822 0 25.676192 25.676192 0 0 0 0 36.624016l448.545742 442.638643H26.385044a25.794334 25.794334 0 1 0 0 51.588668z"></path>
    </symbol>
    <symbol id="icon-g" viewBox="0 0 1024 1024">
      <path d="M592.859991 475.113495v86.004747H769.708167v239.267165a385.429099 385.429099 0 0 1-93.30778 33.623208 441.040176 441.040176 0 0 1-97.651341 11.579077q-16.879121 0-33.116835-1.417846V198.183385a349.397802 349.397802 0 0 1 24.440967-0.945231 296.363604 296.363604 0 0 1 114.462945 23.158154 261.682637 261.682637 0 0 1 94.939429 66.154901L847.824738 213.802198A311.881143 311.881143 0 0 0 722.446629 134.380308a461.463912 461.463912 0 0 0-145.880616-23.158154c-10.465055 0-20.750066 0.438857-30.945055 1.125275V0H486.138936v120.033055a413.403429 413.403429 0 0 0-202.54945 104.20044 379.150066 379.150066 0 0 0-88.39033 129.024A426.771692 426.771692 0 0 0 163.18509 521.407297a443.763341 443.763341 0 0 0 30.382418 167.047033 376.719473 376.719473 0 0 0 85.183296 129.564132 384.742681 384.742681 0 0 0 129.665407 83.799208 408.542242 408.542242 0 0 0 77.722725 22.15666V1024h59.425759v-93.217758c9.125978 0.483868 18.330725 0.810198 27.704263 0.810198a630.558945 630.558945 0 0 0 148.153671-17.644308A535.957099 535.957099 0 0 0 860.85542 858.80967v-383.718681H592.859991zM449.635024 821.338022a291.446154 291.446154 0 0 1-100.352-67.809055 310.789626 310.789626 0 0 1-65.108395-103.120176 350.320527 350.320527 0 0 1-23.326945-129.001494 353.437538 353.437538 0 0 1 23.326945-130.104264 304.499341 304.499341 0 0 1 65.097142-102.546286 301.089758 301.089758 0 0 1 98.191473-67.268923 289.994549 289.994549 0 0 1 38.731956-13.390769v625.596483a304.150505 304.150505 0 0 1-36.560176-12.355516z"></path>
    </symbol>
    <symbol id="icon-weibiaoti-" viewBox="0 0 1024 1024">
      <path d="M512 1024A512 512 0 1 1 1024 512 512 512 0 0 1 512 1024z m0-947.2A435.2 435.2 0 1 0 947.2 512 435.2 435.2 0 0 0 512 76.8z m211.499886 477.5936l-307.6096 183.413029a32.416914 32.416914 0 0 1-3.4816 1.111771c-0.877714 0.380343-1.784686 0.526629-2.691657 0.877714a39.087543 39.087543 0 0 1-11.966172 2.399086c-0.321829 0-0.6144 0.2048-0.965486 0.2048s-1.2288-0.351086-1.901714-0.380343a39.263086 39.263086 0 0 1-12.405028-2.516114c-0.526629-0.2048-0.936229-0.468114-1.4336-0.672914a36.981029 36.981029 0 0 1-17.729829-14.453029 32.709486 32.709486 0 0 1-1.901714-5.412571 33.850514 33.850514 0 0 1-2.574629-12.843886c0-0.702171-0.4096-1.316571-0.4096-2.018743V319.985371c0-0.702171 0.351086-1.316571 0.4096-2.018742a33.938286 33.938286 0 0 1 2.574629-12.843886 32.182857 32.182857 0 0 1 1.901714-5.441829 37.127314 37.127314 0 0 1 17.759086-14.453028 13.633829 13.633829 0 0 1 1.375085-0.643657 39.087543 39.087543 0 0 1 12.522058-2.633143c0.643657 0 1.199543-0.351086 1.8432-0.351086s0.585143 0.175543 0.936228 0.175543a38.912 38.912 0 0 1 12.053943 2.428343c0.877714 0.292571 1.784686 0.468114 2.633143 0.848457a33.909029 33.909029 0 0 1 3.4816 1.111771l307.580343 183.413029a48.010971 48.010971 0 0 1 26.331428 42.949486 49.737143 49.737143 0 0 1-26.331428 41.866971zM649.508571 512l-214.396342-127.853714v255.678171z"></path>
    </symbol>
    <symbol id="icon-dianji" viewBox="0 0 1024 1024">
      <path d="M686.027 362.189c-6.642 0-12.861 1.093-18.95 3.162-0.638-0.338-1.292-0.556-1.982-0.757-11.384-18.209-30.737-29.391-52.559-29.391a65.179 65.179 0 0 0-21.469 3.617c-11.265-18.964-31.071-30.634-53.396-30.634-4.001 0-7.937 0.353-11.789 1.058v-34.416c0-35.862-27.505-63.955-62.625-63.955-35.476 0-64.343 28.683-64.343 63.955v168.986l-9.887-9.87c-11.464-11.381-27.454-17.669-45.022-17.669-17.688 0-34.854 6.622-45.918 17.7-24.108 24.111-32.144 65.973-3.832 94.305l144.44 143.477c3.309 3.281 7.11 6.272 11.281 8.88 27.099 21.941 59.379 36.499 127.623 36.499 158.613 0 171.894-92.989 171.894-188.25V426.179c-0.02-35.896-27.307-63.991-63.469-63.991z m38.267 166.681c0 92.371-10.809 163.032-146.674 163.032-61.567 0-88.618-12.003-112.358-31.357l-1.447-1.022c-2.776-1.682-5.246-3.58-7.347-5.686L312.063 510.393c-18.88-18.896-9.114-45.645 3.848-58.61 6.356-6.352 17.119-10.307 28.094-10.307 10.861 0 20.546 3.685 27.238 10.326l52.893 52.706V274.795c0-21.367 17.551-38.735 39.123-38.735 20.981 0 37.407 17.016 37.407 38.735v73.152l0.321-0.167v75.154c0 6.958 5.65 12.608 12.609 12.608 6.962 0 12.608-5.649 12.608-12.608v-87.649c3.701-1.141 7.502-1.934 11.482-1.934 16.275 0 29.842 10.088 35.391 26.281l1.597 4.675v82.532c0 6.958 5.65 12.609 12.612 12.609 6.958 0 12.609-5.65 12.609-12.609v-84.181c4.085-1.363 8.337-2.287 12.639-2.287 16.278 0 29.827 10.086 35.392 26.276l0.856 2.504v82.5c0 6.962 5.65 12.608 12.609 12.608 6.962 0 12.608-5.647 12.608-12.608V389.84c4.054-1.494 8.273-2.468 13.386-2.468 21.014 0 36.872 16.657 36.887 38.769v102.726h0.02z m-364.5-135.357c2.255 1.697 4.911 2.487 7.516 2.487 3.848 0 7.649-1.748 10.12-5.079 4.169-5.6 3.009-13.501-2.588-17.654-33.744-25.116-53.114-63.635-53.114-105.649 0-72.547 59.03-131.591 131.592-131.591 72.565 0 131.612 59.046 131.612 131.591 0 8.809-0.875 17.653-2.607 26.228-1.378 6.827 3.043 13.484 9.87 14.863 6.823 1.328 13.48-3.059 14.859-9.869a157.413 157.413 0 0 0 3.111-31.205c0-86.467-70.359-156.811-156.83-156.811-86.467 0-156.811 70.359-156.811 156.811 0 49.33 23.656 96.388 63.265 125.878z m0 0z"></path>
    </symbol>
    <symbol id="icon-video" viewBox="0 0 1422 1024">
      <path d="M1292.941504 0.000284H129.279928A129.023928 129.023928 0 0 0 0 128.000213v767.999574A129.023928 129.023928 0 0 0 129.279928 1023.999716h1163.661576A129.023928 129.023928 0 0 0 1422.221432 895.999787v-767.999574A129.023928 129.023928 0 0 0 1292.941504 0.000284zM930.929261 569.599968l-265.045186 166.399908c-45.255086 31.999982-90.510172 12.799993-90.510172-44.799976V332.8001c0-57.599968 38.798201-76.799957 90.510172-44.799976l265.045186 166.399908c51.711971 31.999982 51.711971 83.199954 0 115.199936z"></path>
    </symbol>
    <symbol id="icon-fire" viewBox="0 0 1024 1024">
      <path d="M536.841481 0a394.770963 394.770963 0 0 1 45.511112 191.070815c0 153.220741-73.367704 277.598815-163.972741 277.598815-70.580148 0-130.199704-75.96563-153.448296-181.930667C182.897778 399.985778 113.777778 534.072889 113.777778 666.718815 113.777778 864.06637 292.02963 1024 512 1024s398.222222-159.93363 398.222222-357.281185C910.222222 308.451556 551.461926 12.003556 536.841481 0z m-21.617777 938.666667c-134.144 0-174.193778-101.527704-167.329185-142.506667 13.729185-81.540741 96.161185-94.966519 158.568296-94.966519 148.176593 0 207.815111-150.793481 211.456-189.781333 0 0 53.342815 427.254519-202.695111 427.254519z"></path>
    </symbol>
    <symbol id="icon-line" viewBox="0 0 1024 1024">
      <path d="M6.5641024 0h157.538462v1024H6.5641024z"></path>
    </symbol>
    <symbol id="icon-circle" viewBox="0 0 1024 1024">
      <path d="M496 503.338667m-489.344 0a489.344 489.344 0 1 0 978.688 0 489.344 489.344 0 1 0-978.688 0Z"></path>
    </symbol>
    <symbol id="icon-lock" viewBox="0 0 1024 1024">
      <path d="M507.180564 589.653605a24.397417 24.397417 0 0 0-26.32167 21.855283v166.862794a26.780666 26.780666 0 0 0 52.64334 0v-166.915755a24.397417 24.397417 0 0 0-26.32167-21.802322z m332.172062-223.672408h-57.092073V277.183075a278.593076 278.593076 0 0 0-77.67629-195.779559A272.27305 272.27305 0 0 0 507.180564 0.019949a272.255397 272.255397 0 0 0-197.403699 81.34826 278.593076 278.593076 0 0 0-77.67629 195.779558v88.780469H184.559154A92.946743 92.946743 0 0 0 88.275862 454.885242v480.004165A92.946743 92.946743 0 0 0 184.559154 1023.934681h654.793472A92.946743 92.946743 0 0 0 935.653572 934.889407v-480.004165a92.946743 92.946743 0 0 0-96.283292-88.97466zM283.878883 277.183075A219.382558 219.382558 0 0 1 507.180564 51.868872 219.382558 219.382558 0 0 1 730.499898 277.183075v88.780468H283.878883V277.183075z m599.99638 657.706332a41.344971 41.344971 0 0 1-44.504983 37.072775H184.559154a41.344971 41.344971 0 0 1-44.504983-37.072775v-480.004165a41.344971 41.344971 0 0 1 44.504983-37.072775h654.793472a41.344971 41.344971 0 0 1 44.504983 37.072775v480.004165z"></path>
    </symbol>
    <symbol id="icon-arrowright1-copy" viewBox="0 0 1024 1024">
      <path d="M105.34425701 267.649318L64.321958 308.671617 512 756.349659 959.677019 308.671617 918.65472 267.649318 512 674.30506099Z"></path>
    </symbol>
    <symbol id="icon-video-" viewBox="0 0 1611 1024">
      <path d="M1454.610963 13.198222H152.538074A126.596741 126.596741 0 0 0 26.093037 139.643259v745.775408a126.596741 126.596741 0 0 0 126.445037 126.445037h1302.034963a126.596741 126.596741 0 0 0 126.445037-126.445037V139.643259a126.520889 126.520889 0 0 0-126.407111-126.445037zM1543.130074 885.418667a88.632889 88.632889 0 0 1-88.519111 88.519111H152.538074A88.632889 88.632889 0 0 1 64.018963 885.418667V139.643259a88.632889 88.632889 0 0 1 88.519111-88.519111h1302.034963a88.632889 88.632889 0 0 1 88.519111 88.519111v745.775408z"></path>
      <path d="M975.909926 457.234963l-268.781037-161.261037c-50.706963-30.416593-92.197926-6.940444-92.197926 52.186074v328.779852c0 59.126519 41.490963 82.602667 92.197926 52.186074l268.781037-161.298963c50.706963-30.416593 50.706963-80.175407 0-110.592z"></path>
    </symbol>
    <symbol id="icon-xingzhuang6" viewBox="0 0 1117 1024">
      <path d="M285.52529 664.619668l-0.152077 2.668949c0.253461-0.707157 0.532269-1.414314 0.811077-2.124007z m692.000212 179.704107c-3.725882-0.147008-17.362103 3.713209-17.995756 3.80192a412.128176 412.128176 0 0 0-2.407883-134.841445c-4.055382-21.767262-0.076038-34.034792 15.562527-47.397275 19.034948-16.236735 43.240508-42.366067 40.832626-73.364391a23.460384 23.460384 0 0 0-2.864114-8.503629c-19.643256-23.701172-42.961701-22.200681-66.406877-15.714604-70.031375 19.372052-132.788408 1.315464-208.117124-6.562115-0.887115-19.009602-1.748883-38.153539-2.635999-57.282268-0.101385-2.810887-2.23046-8.521371-3.624497-8.762159-1.039192-0.185027-4.765074 3.515509-5.778919 6.516491-11.60853 31.081967 5.525458 73.549418-37.309513 78.279008-13.560183-15.040397-26.43602-39.218077-30.035171-56.570042-4.308843-20.831989-20.555717-35.256476-17.38745-5.431677 1.77423 16.474989 16.753796 43.795589 32.189593 67.103896a19.263064 19.263064 0 0 1-14.751451 0.613376c-74.289525-24.220768-143.484477-58.906955-221.702654-35.829298 66.381531-4.09847 127.668488 16.099866 184.13968 46.733206 28.007481 15.187405 49.298235 11.058519 72.565988-1.062003 61.109535-31.844886 168.881306-14.361121 215.061966 36.029533 48.765966 53.226886 62.478226 184.79361 23.850715 245.675029-20.910562 32.949977-45.547007 65.851797-87.469517 71.106051-57.358306 7.190699-115.375612 10.295601-172.429765-5.426608a54.87185 54.87185 0 0 0-19.87137-1.323068c-95.098703 10.024397-190.04533 11.74033-284.814534-3.67519-58.803036-9.568166-82.045443-43.886835-89.80136-103.059924-8.085417-61.644338 16.348258-108.324317 9.04857-168.082903-8.161456 21.496058-16.474989 42.931286-24.332291 64.531263-4.435574 12.237115-4.384882 28.727311-12.698414 36.483228-32.189593 29.984479-87.925747 27.607012-119.583071-3.041536-13.230683-12.809937-24.53506-27.568992-37.613666-40.553818-21.823023-21.660808-41.669048-23.589649-62.351495-2.684156-20.251563 20.446728-33.380861 46.492418-27.297789 76.223436 19.212371 93.795912 113.525344 142.503582 191.870252 135.094906 41.821125-3.946393 47.29589-21.51887 71.628181-35.39081a12.450022 12.450022 0 0 1 3.751228-0.91753c6.463265 7.489783 10.848146 12.515922 17.362103 20.023447-9.910339 5.558408-25.548905-2.504198-29.097364 16.315308-5.854957 10.328551 19.719294 6.083073 26.005136 7.096919 7.654533 1.231822 15.866681 0.030415 23.141022 2.207648 103.564313 31.003394 194.531596 29.817195 299.971523 23.985049 11.963376-0.661534 39.945511-9.654343 51.173849-8.653171 21.468177 1.911099 42.70824 8.475748 64.632647 10.645377 0 8.914236-4.156766 37.236009-4.156766 47.506263-1.089884 7.900391 2.027691 11.246081 7.071572 3.071952 3.269652-5.337896 9.352724-46.484814 14.675413-49.03717 4.435574-2.126541 47.904198-0.955549 52.719963-1.921237s26.537405 43.798123 31.682671 45.227646c5.880304 1.632291 8.744417 2.473783-0.811077-20.677378-5.145266-10.001585-8.643032-16.804488-13.661567-26.583028 13.889683-1.335741 25.447521-4.410228 36.549128-3.188544 56.065653 6.16925 102.651852-19.093244 147.108975-46.685048 15.131643-9.37807 33.507592-25.414571 33.507592-47.176764-4.993189-23.22213-26.055828-23.949564-49.095466-24.862025zM240.91609 902.237161c-79.434791 35.545422-185.356295-4.359535-222.0575-83.013665-14.751451-31.576217-3.725882-58.724463 13.053261-83.895711 11.709915-17.600357 44.583854-12.419607 61.92061 7.64186a107.688129 107.688129 0 0 1 9.555494 14.62979c34.977668 57.20116 75.784947 67.453672 134.461253 33.730638 4.866458-2.788075 9.656878-5.654723 14.675413-8.602479-2.68669 39.223146-2.68669 58.042652 14.067105 111.211242a225.20549 225.20549 0 0 0-25.675636 8.308464z m633.349253-310.267123c49.222197 4.876597 105.034389-21.369327 132.661677-2.438298 12.014069 8.252702-42.37874 71.141535-58.77769 89.302042-15.28372-35.841971-39.03305-61.783742-73.883987-86.853605zM286.18429 665.16461c-14.143144-48.811589-2.788075-77.559177 40.731241-102.220967 15.182336-8.617686 30.11121-18.125022 46.256698-24.491972 18.984256-7.489783 37.715051-8.23496 49.450312 22.3046-52.162348-24.943133-81.209021 9.187974-113.42396 34.470746-16.525681 12.951876-19.41514 29.672722-15.61322 49.632804 1.11523 5.857492-5.170612 13.129299-8.060071 19.752244z m207.508817 27.72107c-0.228115 6.323861-1.292653 16.928684-1.495422 21.351585-0.836422 18.340464-1.77423 32.470935 6.792765 38.820142 10.290531 7.603841 33.1274 3.589013 48.157659-1.875614 18.021103-6.546907 33.532938-19.939805 48.86735-29.561199-14.979567 34.496091-58.625613 60.526573-93.983473 49.571974-11.988722-3.715744-25.067329-21.290754-27.373827-34.328807-2.55996-14.510663 6.640688-31.089571 10.696069-46.766156 3.193613-7.859837 10.189147-18.510283 8.338879 2.788075zM369.547732 890.172401c28.691826-28.324307 89.776015-31.244182 76.013062-93.020321 14.700759 3.682794 18.29991 11.464057 12.825145 33.203439-6.995534 27.705862-62.376841 65.575524-88.838207 59.816882z m-47.397275-32.189594c-5.753573-42.008686 60.906765-85.005872 107.366233-68.414291-46.05393 9.778539-87.672285 20.692586-107.366233 68.432034z m298.881639 9.854578c-43.189816-29.538387-68.333183-16.551027-63.796225 45.524196-0.405538 8.085417-3.877959 12.741503-7.603841 1.173526-1.140576-13.068468-3.041536-28.007481-2.23046-38.432347 1.875614-24.099106 23.41983-35.738052 40.959356-35.314771 10.36657 0.253461 25.65029 12.031811 38.779589 18.981721 9.276686 6.597599 2.281152 12.406934-6.108419 8.098091zM889.929255 833.321017c0 7.051295-31.175748 75.047375-39.387895 87.269282s-15.714604 12.576753-9.631532-4.177044 23.952099-82.344528 35.712706-88.39465 13.306722-1.751418 13.306721 5.302412z m-35.129744-207.627945c8.490956 8.490956 33.583631 64.031944 33.58363 75.675959s-5.221304 12.23458-12.343568 4.749866-17.742295-51.16878-26.613443-76.750635c-3.117575-8.764694-3.117575-12.173749 5.373381-3.67519z m-468.295214 6.843457c8.060071-12.622376 25.016636-24.025603 31.784055-38.959546 4.891804-10.739158-4.612997-29.601753-0.126731-36.627701 1.77423-2.788075 7.071572 7.142541 9.783609 10.792384 11.507146 19.143937 0.025346 40.759122-41.440933 64.797398z m453.974647 122.404096s14.143144 2.027691 18.173179 20.20594 0 28.288823 0 28.288823-8.338879 4.463455-11.557838-2.549822-4.055382-12.419607-6.615341-12.419606-1.77423-8.00431 0-8.587271 0-24.935529 0-24.935529z m-146.678091 7.096918s-3.244305 16.72845 0 22.119573 14.574028 3.325413 14.574028-4.270824-5.398727-22.160127-14.574028-17.84368zM344.201595 872.835643c1.140576-2.281152-0.608307-13.643825 6.818111-12.166145s12.622376 5.9386 9.656878 13.359948-8.92184 6.678707-7.426418 10.391916 14.092452 2.968033 15.587874-8.16399 1.495422-40.074776-20.783832-31.910786-10.898839 29.860283-9.656878 31.910786 4.663689-1.143111 5.804265-3.416659z m-36.219628-240.301648s5.094573-18.487472 12.495645-12.92653 0 25.014102 0 25.014102 8.820455 4.169439 12.064761-6.483542 6.944841-35.669618-6.032381-31.964012-18.528026 7.915598-18.528025 17.139057v9.223459zM987.816034 147.340512a10.019328 10.019328 0 0 1-9.048571-14.386467l51.984926-108.291367-76.266524 18.038845a10.044674 10.044674 0 0 1-4.638343-19.544406L1046.593724 0.27716a10.052278 10.052278 0 0 1 11.380415 14.117798L1005.178137 124.313547l100.953661-16.350792a10.039605 10.039605 0 0 1 3.193613 19.825747l-119.912571 19.422745a9.976239 9.976239 0 0 1-1.596806 0.134334z m-54.494193 160.050712a10.217028 10.217028 0 0 1-2.154422-0.23065l-66.204108-14.447298a10.057347 10.057347 0 0 1-5.525457-16.292496l58.524228-69.212694-56.090999-1.363622a10.014258 10.014258 0 0 1-9.783609-10.280393 9.907805 9.907805 0 0 1 10.290531-9.796282l77.026908 1.87308a10.03707 10.03707 0 0 1 7.426418 16.518077l-61.286957 72.489949 49.906542 10.898839a10.042139 10.042139 0 0 1-2.129075 19.848559z m-65.418378 167.667226a10.039605 10.039605 0 0 1-8.541648-15.347086l39.996203-64.21697-48.259043 9.715174a10.039605 10.039605 0 1 1-3.953998-19.686344l71.04522-14.307894a10.047208 10.047208 0 0 1 10.518647 15.15192l-41.238164 66.201573 63.517418-7.573425a10.042139 10.042139 0 0 1 2.382537 19.944874l-84.275904 10.047209a10.199285 10.199285 0 0 1-1.191268 0.076038z"></path>
    </symbol>
    <symbol id="icon-right" viewBox="0 0 1024 1024">
      <path d="M512 0a512 512 0 1 0 512 512A513.504 513.504 0 0 0 512 0z m0 960A445.24 445.24 0 0 1 64 512a448 448 0 1 1 448 448z m230.4-614.4L435.2 652.8 281.6 499.2c-19.456-19.456-45.056-19.456-57.344 0s-19.456 45.056 0 57.344l179.2 179.2c19.456 19.456 45.056 19.456 57.856 0L800.256 396.8c19.456-19.456 19.456-45.056 0-57.344-12.8-12.8-38.912-12.8-57.856 6.144z"></path>
    </symbol>
    <symbol id="icon-remove" viewBox="0 0 1024 1024">
      <path d="M710.68 287.424a25.472 25.472 0 0 0-15.848 5.504l-0.264-0.248L512.072 475.2 333.088 296.2l-0.176 0.2a25.6 25.6 0 1 0-33.712 37.864l-0.208 0.232 72.952 72.952-0.384 0.376 103.936 103.944-97.536 97.544 0.376 0.376-78.72 78.72a25.6 25.6 0 1 0 30.264 41.128l0.52 0.496 181.68-181.68L692.12 728.4a25.6 25.6 0 0 0 34.968-37.368L645.816 609.688l0.376-0.376-97.536-97.544 103.936-103.936-0.384-0.384 74.4-74.4a25.776 25.776 0 0 0 4-4l1.304-1.304-0.2-0.184a25.6 25.6 0 0 0-21.032-40.136zM512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m0 972.8A460.8 460.8 0 1 1 972.8 512 460.8 460.8 0 0 1 512 972.8z"></path>
    </symbol>
    <symbol id="icon-gou" viewBox="0 0 1280 1024">
      <path d="M126.912 458.752L425.984 691.2 1170.24 21.504a76.8 76.8 0 0 1 93.504-9.856 60.16 60.16 0 0 1-5.824 86.4l-777.088 889.6a78.656 78.656 0 0 1-130.432-0.96L15.168 544.448a71.168 71.168 0 0 1 9.856-96 75.968 75.968 0 0 1 101.888 10.304z"></path>
    </symbol>
    <symbol id="icon-xingzhuang7" viewBox="0 0 1024 1024">
      <path d="M382.534474 257.173856h245.456447c75.955881 0 133.899948-165.685005 133.899948-165.685005C761.890869 41.878103 756.950099 4.348555 672.610136 1.692045S568.092543 60.989747 507.491966 60.989747C445.38547 60.989747 414.319531 12.267323 337.898338 1.692045S248.634526 41.878103 248.634526 91.488851c0 0 57.918686 165.685005 133.899948 165.685005z m258.882821 51.209729H382.534474C95.885201 308.383585 25.513067 874.820889 25.513067 874.820889c0 74.3992 59.94914 149.128349 133.899948 149.12835h705.134198c73.942348 0 133.891488-74.729149 133.891488-149.12835 0 0-70.414435-566.437304-357.021406-566.437304z m29.382354 435.32923a31.472029 31.472029 0 0 1 0 62.944059h-126.903344v82.563315a31.252063 31.252063 0 1 1-62.504127 0v-82.563315h-127.749366a31.472029 31.472029 0 0 1 0-62.944059h127.749366v-39.932252h-127.749366a31.480489 31.480489 0 0 1 0-62.952519H439.979387l-88.409329-158.036964a31.573552 31.573552 0 0 1 11.438221-42.977932 31.150541 31.150541 0 0 1 42.698745 11.480523l106.454985 189.508993h5.389162l106.446525-189.508993a31.142081 31.142081 0 0 1 42.681824-11.480523 31.565092 31.565092 0 0 1 11.463602 42.977932l-88.409329 158.036964h81.065856a31.480489 31.480489 0 0 1 0 62.952519h-126.903344v39.932252h126.903344z m0 0"></path>
    </symbol>
    <symbol id="icon-shanchu1-copy" viewBox="0 0 1024 1024">
      <path d="M62.03327281 991.97774563a30.00010875 30.00010875 0 0 1-21.22916813-51.20745937l428.35792126-428.79428626L40.80410468 83.05080404A30.00010875 30.00010875 0 0 1 83.26244094 40.65792219l449.45617968 450.02345438a29.97829124 29.97829124 0 0 1 1e-8 42.39288187l-449.45617969 450.02345437a29.82556314 29.82556314 0 0 1-21.22916813 8.88003281z m900.1341825-1e-8a29.82556314 29.82556314 0 0 1-21.22916811-8.72730468l-449.45618064-450.02345437a29.97829124 29.97829124 0 0 1 0-42.39288188L940.9382872 40.81065031a30.00010875 30.00010875 0 0 1 42.45833623 42.39288094L555.03870219 511.976l428.35792124 428.72883187a30.00010875 30.00010875 0 0 1-21.22916812 51.27291375z"></path>
    </symbol>
    <symbol id="icon-xingzhuangkaobei1" viewBox="0 0 1057 1024">
      <path d="M936.167226 136.423226H109.898323a27.086452 27.086452 0 1 1 0-54.172903h826.268903a27.086452 27.086452 0 1 1 0 54.172903z m0 793.765161H109.898323a27.086452 27.086452 0 1 1 0-54.172903h826.268903a27.086452 27.086452 0 1 1 0 54.172903z m0-397.047742H109.898323a27.086452 27.086452 0 1 1 0-54.172903h826.268903a27.086452 27.086452 0 1 1 0 54.172903z"></path>
    </symbol>
    <symbol id="icon-xingzhuangkaobei2" viewBox="0 0 1056 1024">
      <path d="M950.4 168H529.92a25.28 25.28 0 1 1 0-50.56H950.4a25.28 25.28 0 1 1 0 50.56zM346.944 130.56a17.088 17.088 0 0 1 17.024 16.96v731.84a17.088 17.088 0 0 1-17.024 16.96h-172.8a17.088 17.088 0 0 1-17.024-16.96V147.52a17.088 17.088 0 0 1 17.024-16.96h172.8m0-47.68h-172.8a64.896 64.896 0 0 0-65.28 64.64v731.84a65.12 65.12 0 0 0 65.28 64.64h172.8a65.12 65.12 0 0 0 65.248-64.64V147.52a64.896 64.896 0 0 0-65.248-64.64zM950.4 920H529.92a25.28 25.28 0 1 1 0-50.56H950.4a25.28 25.28 0 1 1 0 50.56z m0-374.08H529.92a25.28 25.28 0 1 1 0-50.56H950.4a25.28 25.28 0 1 1 0 50.56z"></path>
    </symbol>
    <symbol id="icon-zhuanfa" viewBox="0 0 1380 1024">
      <path d="M30.510104 1024H27.749774a30.363628 30.363628 0 0 1-27.558777-30.274585c-3.517194-213.702954 54.672339-383.774888 172.965829-504.873229a639.550612 639.550612 0 0 1 297.447799-167.400648 1619.022485 1619.022485 0 0 1 267.618428-27.158083V30.726478a30.230064 30.230064 0 0 1 48.172208-24.932011L1367.711818 432.75516a30.230064 30.230064 0 0 1 12.466005 24.486797 31.165014 31.165014 0 0 1-12.510527 24.932011l-581.361078 424.734622a30.452671 30.452671 0 0 1-48.083165-24.932012v-248.429684c-209.250809 5.787788-465.204618 68.563031-573.035567 182.983155a422.24142 422.24142 0 0 0-104.981576 182.983154 30.363628 30.363628 0 0 1-29.695806 24.486797z m737.987535-451.892705a29.962935 29.962935 0 0 1 21.459338 8.90429 30.40815 30.40815 0 0 1 8.90429 21.81551v219.490742l499.441612-365.07588-499.441612-366.411523v233.737606a30.051978 30.051978 0 0 1-9.260462 21.81551 31.788314 31.788314 0 0 1-22.260724 8.904289 55.117554 55.117554 0 0 0-7.791254-0.445214c-47.059171 0-379.100136 8.90429-543.161675 176.750152a550.285107 550.285107 0 0 0-144.961837 304.081495 494.855903 494.855903 0 0 1 47.103693-58.323098 590.398932 590.398932 0 0 1 206.802129-142.023422c100.618474-41.850162 308.800769-63.220457 443.166502-63.220457z m0 0"></path>
    </symbol>
    <symbol id="icon-share" viewBox="0 0 1024 1024">
      <path d="M490.929231 499.987692H358.4a31.704615 31.704615 0 1 1 0-63.212307h93.696L383.803077 334.769231a31.586462 31.586462 0 1 1 52.578461-35.052308l85.07077 127.606154 85.464615-128.196923A31.763692 31.763692 0 0 1 659.495385 334.769231l-67.997539 102.006154h95.172923a31.704615 31.704615 0 1 1 0 63.212307h-132.529231v36.233846h132.529231a31.704615 31.704615 0 1 1 0 63.212308h-132.529231v131.544616a31.901538 31.901538 0 0 1-31.507692 31.704615c-17.526154 0-31.704615-14.178462-31.704615-31.704615v-131.544616H358.4a31.704615 31.704615 0 1 1 0-63.212308h132.529231v-36.233846zM809.353846 154.584615h-23.827692a40.763077 40.763077 0 0 1 0-81.32923h121.501538a40.763077 40.763077 0 0 1 40.96 55.079384V236.307692a40.763077 40.763077 0 0 1-40.96 39.384616A40.763077 40.763077 0 0 1 866.461538 236.307692v-23.630769l-57.107692 58.289231a40.96 40.96 0 0 1-57.501538-2.56 37.809231 37.809231 0 0 1 0-55.138462l57.501538-58.683077zM512 1006.867692C238.690462 1006.867692 17.132308 785.309538 17.132308 512S238.690462 17.132308 512 17.132308c33.476923 0.059077 66.835692 3.426462 99.643077 10.043077a42.220308 42.220308 0 1 1-16.935385 82.707692A410.584615 410.584615 0 1 0 922.584615 512a420.036923 420.036923 0 0 0-10.830769-94.326154 42.141538 42.141538 0 0 1 81.92-19.692308A495.064615 495.064615 0 0 1 512 1006.867692z"></path>
    </symbol>
    <symbol id="icon-info" viewBox="0 0 1024 1024">
      <path d="M505.294856 1023.956679A511.978339 511.978339 0 1 0 0.011618 505.873982v24.456812A510.993766 510.993766 0 0 0 505.294856 1023.956679z m0-966.339424a454.400468 454.400468 0 1 1 0 908.722169 454.400468 454.400468 0 0 1 0-908.722169z m-19.179496 569.556211h44.778413a13.784032 13.784032 0 0 0 12.799459-12.799459l12.799458-332.78592a20.439751 20.439751 0 0 0-19.179496-19.21888h-57.577872a16.974051 16.974051 0 0 0-19.179496 19.21888l12.799459 332.78592a13.784032 13.784032 0 0 0 12.760075 12.799459z m25.598917 153.593502a51.197834 51.197834 0 1 0-51.197834-51.197834 55.136129 55.136129 0 0 0 51.197834 51.197834z"></path>
    </symbol>
    <symbol id="icon-xingzhuang11" viewBox="0 0 1024 1024">
      <path d="M842.175549 430.510362L319.09522 23.5485A113.294059 113.294059 0 0 0 206.613179 8.967495a28.244078 28.244078 0 0 0-3.883561 1.659339A105.279802 105.279802 0 0 0 141.228138 105.067971v814.029639a105.315107 105.315107 0 0 0 62.207582 94.547052 112.976313 112.976313 0 0 0 115.624195-13.062886l523.115634-406.961862a102.384784 102.384784 0 0 0 0-163.109552z m-89.851474 81.519471L263.666217 892.301041V131.86454z"></path>
    </symbol>
    <symbol id="icon-likexuexi" viewBox="0 0 1024 1024">
      <path d="M684.032 881.152h-409.6c-43.008 0-77.824-34.816-77.824-77.824V220.672c0-43.008 34.816-77.824 77.824-77.824h409.6c79.36 0 143.872 64.512 143.872 143.872v450.56c0 79.36-65.024 143.872-143.872 143.872z m-409.6-674.304c-7.68 0-14.336 6.144-14.336 14.336v582.144c0 7.68 6.144 14.336 14.336 14.336h409.6c44.032 0 79.872-35.84 79.872-79.872V286.72c0-44.032-35.84-79.872-79.872-79.872h-409.6z"></path>
      <path d="M664.064 412.16H359.936c-17.92 0-31.744-14.336-31.744-31.744 0-17.408 14.336-31.744 31.744-31.744h304.128c17.92 0 31.744 14.336 31.744 31.744 0 17.408-14.336 31.744-31.744 31.744z m-82.432 148.48H359.936c-17.92 0-31.744-14.336-31.744-31.744s14.336-31.744 31.744-31.744h222.208c17.92 0 31.744 14.336 31.744 31.744s-14.336 31.744-32.256 31.744z"></path>
    </symbol>
    <symbol id="icon-jiantou" viewBox="0 0 1024 1024">
      <path d="M336.325 171.134l387.574 297.604c26.938 20.681 26.938 65.523 0 86.203L336.325 852.545c-24.968 19.175-56.196-4.808-56.196-43.161V214.233c0-38.294 31.225-62.278 56.196-43.103z"></path>
    </symbol>
    <symbol id="icon-dingyue" viewBox="0 0 1024 1024">
      <path d="M967.87 882.012l-108.862-0.154-0.174 94.792c0 26.156-24.02 47.35-53.704 47.35-29.633 0-53.688-21.194-53.688-47.35l0.157-94.945-108.037-0.14c-29.685 0-53.704-21.208-53.704-47.349 0-26.157 24.02-47.38 53.704-47.38l108.214 0.155 0.157-92.34c0-26.143 24.039-47.35 53.704-47.35 29.685 0 53.705 21.207 53.705 47.35l-0.176 92.493 108.705 0.138c29.665 0 53.703 21.225 53.703 47.352 0 26.156-24.038 47.378-53.704 47.378zM806.476 584.445c-29.667 0-53.686-21.239-53.686-47.378l-0.403-394.609-3.11-2.775 3.11 2.751-0.018-2.15c-1.415-24.752-24.23-44.482-52.55-44.898l-0.647-0.569h52.848l0.313 18.365v-18.49l-590.435 0.37 0.062-0.046c-0.175 0-0.314 0.046-0.48 0.046h-0.332l0.586-0.546h-52.857v0.57h-1.014l0.393 722.053 289.729-255.92c20.97-18.48 54.988-18.48 75.932-0.015 0.541 0.461 0.874 1.017 1.38 1.477l125.906 110.391c20.96 18.481 20.96 48.458 0 66.94-20.979 18.496-54.963 18.496-75.942 0l-89.323-78.283L93.466 964.226c-1.407 1.235-2.98 2.175-4.493 3.237-9.317 6.906-21.222 11.237-34.36 11.237-29.64 0-53.705-21.225-53.705-47.395L0.463 93.728c0.253-48.905 42.611-88.6 96.7-93.356L755.62 0c55.332 1.109 99.842 39.103 104.089 87.192l0.472 449.873c0 26.14-24.056 47.38-53.705 47.38zM161.087 95.085c-29.222 0.447-52.831 21.386-52.831 47.273l3.365-2.968-3.593 3.213 0.848-47.518 52.271-0.024-0.06 0.025z m0.393-0.023h0.418l-50.277 44.328 49.466-44.304c0.113 0 0.254-0.024 0.393-0.024z m537.464 0.248c0.297 0 0.596 0.076 0.875 0.076l49.456 44.298-50.33-44.374z"></path>
    </symbol>
    <symbol id="icon-wenzhang" viewBox="0 0 1024 1024">
      <path d="M909.186 104.382c-19.215-7.887-42.481-11.722-71.123-11.722-111.623 0-278.723 61.038-327.92 79.992-48.772-19.038-213.591-79.992-324.451-79.992-28.479 0-51.663 3.835-70.88 11.722a36.568 36.568 0 0 0-22.68 33.828v671.04c0 18.63 14.008 34.28 32.523 36.343 1.268 0.14 127.604 14.312 192.38 30.969 66.48 17.095 183.073 52.812 184.242 53.171a36.545 36.545 0 0 0 20.668 0.228c1.622-0.46 162.64-45.969 204.775-57.417 32.996-8.964 136.047-22.523 172.97-26.992 18.363-2.222 32.174-17.806 32.174-36.302V138.21a36.564 36.564 0 0 0-22.678-33.828zM165.266 776.82V166.84c5.732-0.645 12.491-1.046 20.426-1.046 91.012 0 233.067 50.371 287.867 71.181l1.733 608.516c-40.617-12.127-98.824-29.157-140.043-39.756-48.997-12.598-126.374-23.394-169.984-28.915z m693.467 0.206c-43.613 5.71-119.445 16.32-151.186 24.943-28.407 7.718-107.685 30.023-159.119 44.526l-1.736-609.461c55.536-20.827 199.475-71.241 291.37-71.241 8.047 0 14.884 0.405 20.671 1.056v610.177z"></path>
    </symbol>
    <symbol id="icon-pintuan" viewBox="0 0 1024 1024">
      <path d="M939.008 839.026c0 23.381-18.887 42.382-42.098 42.382-23.21 0-42.098-19-42.098-42.382 0-0.228 0.114-0.54 0.114-0.74h-0.313c0-0.967 0.114-1.906 0.114-2.873 0-69.148-27.221-131.811-71.111-177.806l0.2-0.199a40.533 40.533 0 0 1-12.147-28.985c0-22.414 18.148-40.675 40.42-40.675a39.96 39.96 0 0 1 28.814 12.202l0.114-0.114c60.558 61.07 98.02 145.408 98.02 238.564h-0.114c0.085 0.114 0.085 0.313 0.085 0.626M604.075 579.868c-0.2 0.114-0.427 0.114-0.626 0.114-138.866 0-251.364 114.29-251.364 255.346 0 0.74 0.114 1.365 0.114 2.02 0 0.54 0.2 1.052 0.2 1.592 0 23.382-18.888 42.383-42.099 42.383-23.21 0-42.097-19.001-42.097-42.383 0-0.227 0.113-0.54 0.113-0.74h-0.455c0-137.13 81.351-254.918 197.974-307.91-48.527-40.05-79.56-100.921-79.56-169.102 0-120.776 97.195-218.596 217.174-218.596 119.865 0 217.173 97.82 217.173 218.596-0.028 120.632-96.995 218.368-216.547 218.68m-0.655-357.944c-76.288 0-138.24 62.236-138.24 139.15 0 76.8 61.839 139.15 138.24 139.15 76.288 0 138.24-62.236 138.24-139.15-0.085-76.914-61.923-139.15-138.24-139.15M346.795 260.38c-46.109 12.857-79.986 54.7-79.986 104.505 0 41.728 23.751 77.853 58.567 96.029 14.137 7.338 27.847 21.333 30.066 45.568 1.906 21.02-4.21 52.679-31.858 60.33-92.644 25.686-160.91 108.232-164.295 207.332 0.199 1.593 0.512 3.186 0.512 4.779 0 20.707-16.669 37.603-37.348 37.603-20.565 0-37.347-16.782-37.347-37.603 0-0.427 0.114-0.74 0.114-1.053h-0.228c0-126.066 74.382-226.446 178.859-269.88-43.264-33.252-71.225-85.192-71.225-143.617 0-73.5 44.003-136.704 107.434-165.262 29.64-13.397 51.172 2.56 56.463 23.154 6.314 24.633-9.728 38.115-9.728 38.115"></path>
    </symbol>
    <symbol id="icon-shipin" viewBox="0 0 1024 1024">
      <path d="M371.463 660.159V412.941c0-57.146 64.326-90.633 111.142-57.869l176.588 123.613c40.169 28.122 40.169 87.608 0 115.73L482.596 718.028c-46.816 32.773-111.133-0.722-111.133-57.869z m70.63 0L618.68 536.546 442.093 412.94V660.16z m-329.09 220.703c-16.925 0-30.696-13.555-30.696-30.226V185.754c0-16.662 13.771-30.226 30.695-30.226h797.996c16.924 0 30.686 13.555 30.686 30.226v664.882c0 16.662-13.762 30.226-30.686 30.226H113.002z m890.073-30.226V185.754c0-49.994-41.307-90.669-92.078-90.669H113.002c-50.77 0-92.078 40.675-92.078 90.67v664.881c0 49.995 41.307 90.67 92.078 90.67h797.996c50.77 0 92.078-40.675 92.078-90.67z"></path>
    </symbol>
    <symbol id="icon-xiayige-" viewBox="0 0 1024 1024">
      <path d="M307.2 0L204.8 102.4 614.4 512 204.8 921.6 307.2 1024l512-512z"></path>
    </symbol>
    <symbol id="icon-wodeyigou" viewBox="0 0 1024 1024">
      <path d="M320 1024H128C57.6 1024 0 966.4 0 896V128C0 57.6 57.6 0 128 0h768c70.4 0 128 57.6 128 128v256H896V128H128v768h192v128z"></path>
      <path d="M320 256h384c38.4 0 64 25.6 64 64s-25.6 64-64 64H320c-38.4 0-64-25.6-64-64s25.6-64 64-64z m0 256h256c38.4 0 64 25.6 64 64s-25.6 64-64 64H320c-38.4 0-64-25.6-64-64s25.6-64 64-64z m288 512c-19.2 0-32-6.4-44.8-19.2l-160-160c-25.6-25.6-25.6-64 0-89.6s64-25.6 89.6 0L608 870.4l307.2-307.2c25.6-25.6 64-25.6 89.6 0s25.6 64 0 89.6l-352 352c-12.8 12.8-25.6 19.2-44.8 19.2z"></path>
    </symbol>
    <symbol id="icon-fuzhi" viewBox="0 0 1024 1024">
      <path d="M884.5838112 150.4566784h-182.8008416V62.26367253a47.43483307 47.43483307 0 0 0-47.39119467-47.39119466H112.7531872A47.47847147 47.47847147 0 0 0 65.36199253 62.26367253v766.37583787a47.47847147 47.47847147 0 0 0 47.39119467 47.3911936h182.8008416v88.14936747a47.43483307 47.43483307 0 0 0 47.39119467 47.39119466h541.63858773a47.43483307 47.43483307 0 0 0 47.39119467-47.39119466V197.84787307a47.43483307 47.43483307 0 0 0-47.39119467-47.39119467z m-771.830624 685.1213216a6.8075744 6.8075744 0 0 1-6.76393707-6.76393707V62.26367253a6.8075744 6.8075744 0 0 1 6.76393707-6.763936h541.63858773a6.8075744 6.8075744 0 0 1 6.76393707 6.763936v766.37583787a6.8075744 6.8075744 0 0 1-6.76393707 6.763936z m778.59456107 128.77662507a6.76393707 6.76393707 0 0 1-6.76393707 6.76393706H342.94522347a6.76393707 6.76393707 0 0 1-6.76393707-6.76393706V878.77991787h318.21048853a47.43483307 47.43483307 0 0 0 47.39119467-47.39119467v-14.3570016h97.0079424a20.33544853 20.33544853 0 1 0 0-40.6272576h-97.0079424V677.17096853h97.0079424a20.33544853 20.33544853 0 1 0 0-40.62725866h-97.0079424v-101.58996374h97.0079424a20.33544853 20.33544853 0 1 0 0-40.6272576h-97.0079424V396.7948864h27.05574613a20.33544853 20.33544853 0 0 0 0-40.62725867h-27.05574613V191.08393707h182.8008416a6.76393707 6.76393707 0 0 1 6.76393707 6.763936zM159.0097856 218.008768a20.29181013 20.29181013 0 0 1 20.29181013-20.33544747h329.46917014a20.33544853 20.33544853 0 1 1 0 40.6272576h-329.46917014a20.29181013 20.29181013 0 0 1-20.29181013-20.29181013zM599.0584096 356.16762773a20.29181013 20.29181013 0 0 1-20.29180907 20.29181014H179.30159573a20.33544853 20.33544853 0 0 1 0-40.6272576h399.4650048a20.33544853 20.33544853 0 0 1 20.29180907 20.33544746z m0 142.173584a20.29181013 20.29181013 0 0 1-20.29180907 20.29181014H179.30159573a20.33544853 20.33544853 0 0 1 0-40.6272576h399.4650048a20.33544853 20.33544853 0 0 1 20.29180907 20.24817066z m0 139.90439254a20.29181013 20.29181013 0 0 1-20.29180907 20.29180906H179.30159573a20.29181013 20.29181013 0 0 1 0-40.5836192h399.4650048a20.29181013 20.29181013 0 0 1 20.29180907 20.29181014z m0 0"></path>
    </symbol>
    <symbol id="icon-share-money" viewBox="0 0 1118 1024">
      <path d="M672.156234 880.147582H147.126592C66.117191 880.041963 0.105619 814.136009 0 733.126608V147.155083C0.105619 66.145681 66.011572 0.134109 147.020974 0.002086h292.985762a34.431636 34.431636 0 1 1 0 68.863272H147.126592a78.276522 78.276522 0 0 0-78.157701 78.26332v585.786693a78.276522 78.276522 0 0 0 78.157701 78.26332h524.369526z"
        fill="#999999"></path>
      <path d="M880.013473 166.800127a27.830479 27.830479 0 0 0-0.211237-2.957319v-0.422474c0-0.211237-0.105619-0.528093-0.105619-0.739329a0.950567 0.950567 0 0 0-0.105619-0.528093c-0.105619-0.422474-0.105619-0.73933-0.211237-1.161804a0.792139 0.792139 0 0 0-0.105618-0.422474c-0.105619-0.422474-0.211237-0.73933-0.316856-1.161803a0.382867 0.382867 0 0 0-0.105618-0.316856l-0.316856-1.320231v-0.211237c-0.105619-0.422474-0.316856-0.844948-0.422474-1.320232s-0.316856-0.950567-0.528092-1.320231c-0.211237-0.633711-0.528093-1.161804-0.73933-1.795515a26.404629 26.404629 0 0 0-2.429226-4.119122c-0.211237-0.316856-0.316856-0.528093-0.528092-0.844948l-0.950567-1.320232a11.221967 11.221967 0 0 0-0.950567-1.161803c-0.211237-0.211237-0.316856-0.422474-0.528092-0.633711L757.179139 12.069001a34.458041 34.458041 0 0 0-52.386784 44.782251L772.599442 135.985925c-169.253671 10.852302-297.949833 64.084034-382.972738 158.190132-123.996137 137.198452-107.202793 265.102474-106.463463 272.390152a34.16759 34.16759 0 0 0 34.11478 30.734988h0.105619c1.056185 0 2.323607 0 3.591029-0.105619a34.603266 34.603266 0 0 0 30.62937-37.811428c-0.105619-1.478659-13.730407-105.829753 89.564501-219.580895 72.348683-79.741979 184.515547-125.052323 334.018556-134.980463l-71.820591 95.690376a34.431636 34.431636 0 0 0 27.460814 55.132865h0.105619A34.920122 34.920122 0 0 0 758.55218 341.94203l114.490471-152.750778 0.105618-0.211237a5.861828 5.861828 0 0 1 0.633711-0.844948 4.475585 4.475585 0 0 0 0.528093-0.73933l0.633711-0.950566c0.105619-0.211237 0.316856-0.422474 0.422474-0.633711a4.594405 4.594405 0 0 0 0.422474-0.73933 0.369665 0.369665 0 0 0 0.105618-0.211237c0.211237-0.316856 0.316856-0.633711 0.528093-0.950567s0.422474-0.950567 0.633711-1.320231 0.422474-0.950567 0.633711-1.478659c0.105619-0.316856 0.211237-0.528093 0.316856-0.844948 0.211237-0.633711 0.422474-1.161804 0.633711-1.795515a8.792741 8.792741 0 0 0 0.422474-1.584278c0.105619-0.422474 0.211237-0.73933 0.316855-1.161804a4.488787 4.488787 0 0 0 0.211237-1.161803c0.105619-0.422474 0.105619-0.73933 0.211238-1.161804a4.739631 4.739631 0 0 0 0.105618-1.161804c0-0.316856 0.105619-0.633711 0.105619-0.950566 0-0.633711 0.105619-1.320231 0.105618-1.795515a20.371171 20.371171 0 0 0-0.105618-2.640463z"
        fill="#999999"></path>
      <path d="M879.802236 163.842808a25.968953 25.968953 0 0 1 0.211237 2.957319 27.830479 27.830479 0 0 0-0.211237-2.957319z"
        fill=""></path>
      <path d="M832.31351 452.445402C674.479841 452.445402 546.575819 580.389032 546.575819 738.222701s127.943629 285.777299 285.777298 285.777299 285.777299-127.943629 285.777299-285.777299S990.173584 452.445402 832.31351 452.445402zM962.448724 764.785758a24.846756 24.846756 0 1 1 0 49.535084h-103.823001v103.096873a24.767542 24.767542 0 1 1-49.535084 0V814.320842h-103.862608a24.846756 24.846756 0 1 1 0-49.535084h103.862608v-28.398178h-103.862608a24.846756 24.846756 0 1 1 0-49.535084h73.431273l-53.522182-79.953217a24.767542 24.767542 0 0 1 41.204423-27.474016L833.066042 679.432795l66.988544-100.469613a24.899565 24.899565 0 0 1 41.204423 27.936097l-53.297743 79.953217H962.448724a24.846756 24.846756 0 1 1 0 49.535084h-103.823001v28.398178z"
        fill="#FA8919"></path>
    </symbol>
    <symbol id="icon-ziyuan1" viewBox="0 0 1024 1024">
      <path d="M1023.978534 579.416768v273.410086c-0.122881 94.249679-76.923467 171.050265-171.050265 171.173146H171.184827C76.935148 1023.877119 0.134562 947.199414 0.011681 852.949735V171.206293C0.134562 76.956614 76.812267 0.156028 171.061947 0.002427h340.87172a40.059186 40.059186 0 1 1 0 80.118371H171.184827a91.070135 91.070135 0 0 0-90.931893 91.054775v681.5284a91.070135 91.070135 0 0 0 90.931893 91.054775H852.805388a91.085495 91.085495 0 0 0 91.054775-91.054775V579.416768a40.059186 40.059186 0 0 1 80.118371 0z m-9.21607-389.901215a35.45115 35.45115 0 0 1 0.491524 3.563547c-0.122881-1.105928-0.245762-2.334738-0.491524-3.563547z"
        fill="#999999"></path>
      <path d="M1023.855653 194.062148a32.379127 32.379127 0 0 0-0.245762-3.440667v-0.491523c0-0.245762-0.122881-0.614405-0.12288-0.860167a1.105928 1.105928 0 0 0-0.122881-0.614405c-0.122881-0.491524-0.122881-0.860167-0.245762-1.35169a0.921607 0.921607 0 0 0-0.122881-0.491524c-0.122881-0.491524-0.245762-0.860167-0.368643-1.35169a0.445443 0.445443 0 0 0-0.122881-0.368643l-0.368643-1.536012v-0.245761c-0.122881-0.491524-0.368643-0.983048-0.491524-1.536012s-0.368643-1.105928-0.614404-1.536012c-0.245762-0.737286-0.614405-1.35169-0.860167-2.088976a30.720234 30.720234 0 0 0-2.826261-4.792356c-0.245762-0.368643-0.368643-0.614405-0.614405-0.983048l-1.105928-1.536012a13.0561 13.0561 0 0 0-1.105929-1.35169c-0.245762-0.245762-0.368643-0.491524-0.614405-0.737286L880.945123 14.041574a40.089906 40.089906 0 0 0-60.948945 52.101518L898.88574 158.211634c-196.916702 12.626016-346.647125 74.558009-445.56628 184.044924-144.262221 159.622338-124.724152 308.431153-123.863985 316.909938a39.751983 39.751983 0 0 0 39.690543 35.758353h0.122881c1.228809 0 2.703381 0 4.177952-0.122881a40.258867 40.258867 0 0 0 35.635472-43.991375c-0.122881-1.720333-15.974522-123.126699 104.203035-255.46947 84.173442-92.775108 214.672998-145.49103 388.610965-157.041838l-83.559038 111.33013a40.059186 40.059186 0 0 0 31.949044 64.143849h0.122881A40.62751 40.62751 0 0 0 882.542575 397.829462l133.202936-177.716556 0.122881-0.245762a6.819892 6.819892 0 0 1 0.737286-0.983047 5.20708 5.20708 0 0 0 0.614405-0.860167l0.737285-1.105928c0.122881-0.245762 0.368643-0.491524 0.491524-0.737286a5.345321 5.345321 0 0 0 0.491524-0.860166 0.430083 0.430083 0 0 0 0.122881-0.245762c0.245762-0.368643 0.368643-0.737286 0.614404-1.105929s0.491524-1.105928 0.737286-1.536011 0.491524-1.105928 0.737286-1.720333c0.122881-0.368643 0.245762-0.614405 0.368643-0.983048 0.245762-0.737286 0.491524-1.35169 0.737285-2.088976a10.229838 10.229838 0 0 0 0.491524-1.843214c0.122881-0.491524 0.245762-0.860167 0.368643-1.35169a5.22244 5.22244 0 0 0 0.245762-1.351691c0.122881-0.491524 0.122881-0.860167 0.245761-1.35169a5.514282 5.514282 0 0 0 0.122881-1.35169c0-0.368643 0.122881-0.737286 0.122881-1.105929 0-0.737286 0.122881-1.536012 0.122881-2.088976a23.700661 23.700661 0 0 0-0.122881-3.072023z m-9.093189-4.608036a35.45115 35.45115 0 0 1 0.491524 3.563548c-0.122881-1.105928-0.245762-2.334738-0.491524-3.563548z"
        fill="#999999"></path>
    </symbol>
  </svg>
  <div id="app">
    <div class="d4s24Cak_0">
      <div class="_2iHgUKTE_0" style="opacity: 1;">
        <div class="_2XuSxNZp_0 Wc3vzb2A_0">
          <!---->
          <!---->
          <div class="_3HCtER94_0">
            <div class="XPK3khh7_0"><i class="iconfont u9KJ6z9x_0"></i><span>重学前端</span></div>
            <div class="S8msnNlD_0"><span>首页</span><span class="_3FTQNYev_0">|</span><span class="iconfont"></span></div>
          </div>
          <div class="yXXuK9Bz_0">
            <h1 class="_3QuafcgX_0 _2_jLRfDz_0">
              03 | HTML语义：div和span不是够用了吗？
            </h1>
            <div class="_2dsK9OZI_0 _2_jLRfDz_0"><span>2019-01-22</span> <span>winter</span></div>
            <div class="_1dC78n85_0 _2_jLRfDz_0"><img src="https://static001.geekbang.org/resource/image/f7/f8/f7c1822abb4382896b9b4d3530b02ff8.jpg"
                class="_1hOtWUmw_0">
              <!---->
              <div class="_1Bg5E78Y_0">
                <div class="_1qj_iPD7_0">
                  <h3>朗读人：winter</h3>
                  <p>时长16:17 大小14.93M</p>
                </div>
                <!---->
                <div class="_2Ha38TVL_0 MH1rcCm7_0">
                  <div class="_1iA2uC1V_0" style="background-image: url(&quot;https://static001.geekbang.org/resource/image/f7/f8/f7c1822abb4382896b9b4d3530b02ff8.jpg&quot;);"></div>
                  <div class="iconfont _2Kms_g0F_0"></div>
                </div> <audio title="03 | HTML语义：div和span不是够用了吗？" src="https://res001.geekbang.org/media/audio/74/54/74b3c265c45e2a0187dfd86fdd267054/ld/ld.m3u8"></audio>
              </div>
              <div class="_2qqGfSEe_0">
                <div class="_29HP61GA_0">
                  <p>你好，我是 winter。</p>
                  <p>今天这篇是我们正式开篇的第一篇文章，我想和你聊聊 HTML。</p>
                  <p>我猜屏幕那一边的你估计会说：“HTML 我很熟悉了，每天写，这不是初级程序员才学的内容么，这我还能不会吗？”</p>
                  <p>其实在我看来，HTML 并不简单，它是典型的“入门容易，精通困难”的一部分知识。深刻理解 HTML 是成为优秀的前端工程师重要的一步。</p>
                  <p>我们在上一篇文章中讲到了，HTML 的标签可以分为很多种，比如 head 里面的元信息类标签，又比如 img、video、audio 之类的替换型媒体标签。我今天要讲的标签是：语义类标签。</p>
                  <h2>语义类标签是什么，使用它有什么好处？</h2>
                  <p>语义类标签也是大家工作中经常会用到的一类标签，它们的特点是视觉表现上互相都差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的 section、nav、p，这些都是语义类的标签。</p>
                  <p>语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充，比如标题、自然段、章节、列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。</p>
                  <p>在讲语义之前，我们来说说为什么要用语义。</p>
                  <p>现在我们很多的前端工程师写起代码来，多数都不用复杂的语义标签， 只靠 div 和 span 就能走天下了。</p><!-- [[[read_end]]] -->
                  <p>这样做行不行呢？毫无疑问答案是行。那这样做好不好呢？按照正确的套路，我应该说不好，但是在很多情况下，答案其实是好。</p>
                  <p>这是因为在现代互联网产品里，HTML 用于描述“软件界面”多过于“富文本”，而软件界面里的东西，实际上几乎是没有语义的。比如说，我们做了一个购物车功能，我们一定要给每个购物车里的商品套上 ul
                    吗？比如说，加入购物车这个按钮，我们一定要用 Button 吗？</p>
                  <p>实际上我觉得没必要，因为这个场景里面，跟文本中的列表，以及表单中的 Button，其实已经相差很远了，所以，我支持在任何“软件界面”的场景中，直接使用 div 和 span。</p>
                  <p><strong>不过，在很多工作场景里，语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处。</strong></p>
                  <ul>
                    <li>语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。</li>
                    <li>除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。</li>
                  </ul>
                  <p>不过，不恰当地使用语义标签，反而会造成负面作用。这里我们举一个常见的误区作为例子。我们都知道 ul 是无序列表，ol
                    是有序列表，所以很多接触过语义这个概念，半懂不懂的前端工程师，特别喜欢给所有并列关系的元素都套上 ul。</p>
                  <p>实际上， ul 是长成下面的这种样子的 (以下来自 HTML 标准)。</p>
                  <p>I have lived in the following countries:</p>
                  <ul>
                    <li>Switzerland</li>
                    <li>Norway</li>
                    <li>United Kingdom</li>
                    <li>United States</li>
                  </ul>
                  <p>ul 多数出现正在行文中间，它的上文多数在提示：要列举某些项。但是，如果所有并列关系都用 ul，会造成大量冗余标签。</p>
                  <p>错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给 CSS 编写加重负担。</p>
                  <p>所以，对于语义标签，<strong>我的态度是：“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。</strong></p>
                  <hr>
                  <p>与 JavaScript 这样严格的编程语言相比，HTML
                    中语义标签的使用更接近我们平常说话用的自然语言。我们说话并没有唯一的标准措辞，语义标签的使用也是一样。下面，我挑选了几种（我认为）比较重要的语义标签使用场景，来为你介绍一下。</p>
                  <h2>作为自然语言延伸的语义类标签</h2>
                  <p>其实语义问题不仅仅属于理科，它还是个文科问题。</p>
                  <p><strong>所以我们这里讲语义标签的使用的第一个场景，也是最自然的使用场景，就是：作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义。</strong></p>
                  <p>我们先来看看“表达一定的结构”这个场景。</p>
                  <p>在日语中，有一个语法现象叫做：ルビ，它的读音是 ruby（著名的 ruby 语言就是据此命名的），它中文的意思大约类似于注音或者意思的注解，它的形式可以看下图：</p>
                  <p><img src="https://static001.geekbang.org/resource/image/d4/45/d464f16955d1629b9911699e99d03f45.png"
                      alt=""></p>
                  <p>图中的例子选自动画片《某科学的超电磁炮》第二季第一话。图中把 teleport 放在空间移动上方的用法，就是日文中 ruby
                    的用法。“空间移动”是动画中白井黑子的技能，这里动画字幕上写的是“空间移动”，动画里的台词则用了英文发音“Teleport”，这里就形成了一个使用 ruby 的场景。</p>
                  <p>ruby 的这个形式，在中国的网友中间最近被玩出了新花样，比如表情包。</p>
                  <p><img src="https://static001.geekbang.org/resource/image/67/15/67e0027f9a35eac8170b758f420ff815.jpeg"
                      alt=""></p>
                  <p>有时候微信聊天，不能用 ruby 这样的东西真的是好急啊，只好用括号代替，效果真是差了不少。</p>
                  <p>在 HTML5 中，就引入了这个表示 ruby 的标签，它由 ruby、rt、rp 三个标签来实现。</p>
                  <p>所以说，这些情况里存在的语义，其实原本就存在了，只是我们用纯文字是没法表达的，HTML 作为一种“超文本”语言，支持这些文字表达就是必要的了。</p>
                  <p><strong>还有一种情况是，HTML 的有些标签实际上就是必要的，甚至必要的程度可以达到：如果没有这个标签，文字会产生歧义的程度。</strong></p>
                  <p>这里我们可以介绍一下 em 标签。</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">今天我吃了一个苹果.</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>我们看看这句话，看上去它很清楚，但是实际上，这句话放到不同上下文中，可能表达完全不同的意思。</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">昨天我吃了一个香蕉。</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">今天我吃了一个苹果。</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>再比如：</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">昨天我吃了两个苹果。</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">今天我吃了一个苹果。</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>试着读一读，这两段里面的“今天我吃了一个苹果”，你是不是发现读音不自觉地发生了变化？</p>
                  <p>实际上，不仅仅是读音，这里的意思也发生了变化。前一段中，表示我今天吃的是苹果，而不是别的什么东西，后一段中，则表示我今天只吃了一个苹果，没有多吃。</p>
                  <p>当没有上下文时，如何消除歧义呢？这就要用到我们的 em 标签了。em 表示重音：</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">今天我吃了一个 &lt;em&gt; 苹果 &lt;/em&gt;。</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">今天我吃了 &lt;em&gt; 一个 &lt;/em&gt; 苹果。</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>通过 em 标签，我们可以消除这样的歧义。</p>
                  <p>一些文章常常会拿 em 和 strong 做对比，实际上，我们只要理解了 em 的真正意思，它和 strong 可谓天差地别，并没有任何混淆的可能。</p>
                  <h2>作为标题摘要的语义类标签</h2>
                  <p>介绍完自然语言的语义场景后，我想介绍的另一个语义重要使用场景，就是文章的结构。中国古代小说就形成了“章 - 回”的概念，西方的戏剧也有幕的区分，所以人类的自然语言作品也是如出一辙。</p>
                  <p>HTML 也应该支持这样的需求。HTML 语义标签中，有不少是用于支持这样的结构的标签。</p>
                  <p>语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法，即使我们并不打算深入实践语义，也应该尽量在大的层面上保证这些元素的语义化使用。</p>
                  <p>首先我们需要形成一个概念，一篇文档会有一个树形的目录结构，它由各个级别的标题组成。这个树形结构可能不会跟 HTML 元素的嵌套关系一致。</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">例如：</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line"> </div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h1&gt;HTML 语义 &lt;/h1&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;p&gt;balah balah balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h2&gt; 弱语义 &lt;/h2&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;p&gt;balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h2&gt; 结构性元素 &lt;/h2&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;p&gt;balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">......</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>这段 HTML 几乎是平铺的元素，但是它的标题结构是：</p>
                  <ul>
                    <li>HTML 语义
                      <ul>
                        <li>弱语义</li>
                        <li>结构性元素</li>
                        <li>……</li>
                      </ul>
                    </li>
                  </ul>
                  <p>h1-h6 是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用 hgroup 标签。</p>
                  <p>我们来看下有 / 无 hgroup 的对比：</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h1&gt;JavaScript 对象 &lt;/h1&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h2&gt; 我们需要模拟类吗？&lt;/h2&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;p&gt;balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">......</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>此段生成以下标题结构：</p>
                  <ul>
                    <li>JavaScript 对象
                      <ul>
                        <li>我们需要模拟类吗？</li>
                        <li>…</li>
                      </ul>
                    </li>
                  </ul>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;hgroup&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h1&gt;JavaScript 对象 &lt;/h1&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;h2&gt; 我们需要模拟类吗？&lt;/h2&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;/hgroup&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;p&gt;balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">......</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>这一段生成以下标题结构：</p>
                  <ul>
                    <li>JavaScript 对象——我们需要模拟类吗？
                      <ul>
                        <li>…</li>
                      </ul>
                    </li>
                  </ul>
                  <p>我们通过两个效果的对比就可以知道，在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分。</p>
                  <p>从 HTML 5 开始，我们有了 section 标签，这个标签可不仅仅是一个“有语义的 div”，它会改变 h1-h6 的语义。section 的嵌套会使得其中的 h1-h6 下降一级，因此，在
                    HTML5 以后，我们只需要 section 和 h1 就足以形成文档的树形结构：</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;h1&gt;HTML 语义 &lt;/h1&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;p&gt;balah balah balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;h1&gt; 弱语义 &lt;/h1&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;p&gt;balah balah&lt;/p&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;h1&gt; 结构性元素 &lt;/h1&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;p&gt;balah balah&lt;/p&gt; </div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">......</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;/section&gt;</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>这段代码同样会形成前面例子的标题结构：</p>
                  <ul>
                    <li>HTML 语义
                      <ul>
                        <li>弱语义</li>
                        <li>结构性元素</li>
                        <li>……</li>
                      </ul>
                    </li>
                  </ul>
                  <h2>作为整体结构的语义类标签</h2>
                  <p>我们想介绍的最后一个场景是，随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。</p>
                  <p>应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。</p>
                  <p>我们正确使用整体结构类的语义标签，可以让页面对机器更友好。比如，这里一个典型的 body 类似这样：</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;body&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;header&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;nav&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">            ……</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;/nav&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/header&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;aside&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;nav&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">            ……</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;/nav&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/aside&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;section&gt;……&lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;section&gt;……&lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;section&gt;……&lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;footer&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;address&gt;……&lt;/address&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/footer&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;/body&gt;</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>在 body 下面，有一个 header，header 里面是一个 nav，跟 header 同级的有一个 aside，aside 里面也有一个 nav。接下来是文章的整体，也就是一个一个的
                    section。section 里面可能还有嵌套，但是我们就不管了，最后是一个 footer，这个 footer 里面可能有 address 这样的内容。</p>
                  <p>除此之外，还有 article，article 是一种特别的结构，它表示具有一定独立性质的文章。所以，article 和 body 具有相似的结构，同时，一个 HTML 页面中，可能有多个
                    article 存在。</p>
                  <p>一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种类似报纸的多文章结构适合用 article 来组织。</p>
                  <pre style="position: relative;"><code><table class="hljs-ln"><tbody><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;body&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;header&gt;……&lt;/header&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;article&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;header&gt;……&lt;/header&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;section&gt;……&lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;section&gt;……&lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;section&gt;……&lt;/section&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;footer&gt;……&lt;/footer&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/article&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;article&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        ……</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/article&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;article&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        ……</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/article&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;footer&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">        &lt;address&gt;&lt;/address&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">    &lt;/footer&gt;</div></td></tr><tr><td class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></td><td class="hljs-ln-code"><div class="hljs-ln-line">&lt;/body&gt;</div></td></tr></tbody></table></code><div class="richcontent-pre-copy"><span class="iconfont"></span>复制代码</div></pre>
                  <p>body 里面有自己的 header 和 footer，然后里面是竖篇的 article，每一个 article 里面都有自己的
                    header、section、footer。这是一个典型的多文章结构。</p>
                  <p>在这个结构里，我们看到了一些新标签，我也来逐个介绍一下。</p>
                  <ul>
                    <li>header，如其名，通常出现在前部，表示导航或者介绍性的内容。</li>
                    <li>footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。</li>
                  </ul>
                  <p>header 和 footer 一般都是放在 article 或者 body 的直接子元素，但是标准中并没有明确规定，footer 也可以和 aside，nav，section
                    相关联（header 不存在关联问题）。</p>
                  <ul>
                    <li>aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。</li>
                  </ul>
                  <p>aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。</p>
                  <p>aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。</p>
                  <p>最后 footer 中包含 address，这是个非常容易被误用的标签。address 并非像 date 一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，address
                    明确地只关联到 article 和 body。</p>
                  <h2>总结</h2>
                  <p>本篇中我们介绍了一些基本原则和 HTML 文档的整体结构，从整体上了解了 HTML 语义。</p>
                  <p>至此，我们可以回答是否要语义化的问题：我们应该分开一些场景来看语义，把它用在合适的场景下，可以获得额外的效果。本篇文中，我们至少涉及了三个明确的场景：</p>
                  <ul>
                    <li>自然语言表达能力的补充；</li>
                    <li>文章标题摘要；</li>
                    <li>适合机器阅读的整体结构。</li>
                  </ul>
                  <p>下一篇中，我们会继续深入到更细致的结构中，进一步了解语义。你在工作中是否在使用语义化的标签开发？学习过本篇之后，答案有没有变化呢？你可以给我留言，我们一起讨论。</p>
                  <p><img src="https://static001.geekbang.org/resource/image/a1/9d/a1fa9a462fb96ae3a70ff4751203d79d.jpg"
                      alt=""></p>
                </div>
              </div>
              <!---->
              <div class="_1fMbLOUg_0">
                ©&nbsp;版权归极客邦科技所有，未经许可不得转载
              </div>
            </div>
            <div class="_3PNMKN7j_0 _2_jLRfDz_0">
              <div class="_2d0QwC3-_0">
                <div class="_36LfGj1s_0">上一篇</div>
                <div class="_3TIVUaKt_0">02 | 列一份前端知识架构图</div>
              </div>
              <div class="_2d0QwC3-_0">
                <div class="_36LfGj1s_0">下一篇</div>
                <div class="_3TIVUaKt_0">04 | HTML语义：如何运用语义类标签来呈现Wiki网页？</div>
              </div>
            </div>
            <div class="DU0gW1Le_0 _2_jLRfDz_0">
              <div class="iconfont _3XC20_-x_0"> 写留言</div>
              <h2><span>精选留言</span></h2>
              <ul>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/13/39/30/f7df6ba7.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>莲</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">40</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">我写前端时间不长，写的都是小东西，确实觉得div和span够用<br><br>我认为html标签和自然语言的演化肯定会是一种逻辑：<br><br>汉语中「地」「的」「得」的正确用法今天大部分中国人根本不会，都只用「的」字，也不影响表达。另外很多字的读音标准都变了，英语也有类似的历史，都是人民的选择成了标准<br><br>所以我的观点是：html也一样，设计者的初衷有他自己的思考，但最后开发者的习惯会成为标准（微信小程序最基本的标签不就是view和text嘛），除非这些标签会影响人数更广大的普通用户</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/0f/4e/19/69f6e2ec.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>王大可</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">29</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">咦？根据目录，难道不是该介绍模块一 javascript相关的吗</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/14/f9/bc/cbc0207b.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>Scorpio</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">24</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">老师也有看炮姐吗？(〃•⊖•〃)</div>
                    <!---->
                    <div class="_2xNIY4NG_0">
                      <p class="_33BLbmw4_0">作者回复: 哈哈哈 不然怎么能从里面挑出ruby</p>
                    </div>
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/13/71/05/db554eba.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>👽</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">22</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">完了...今天文章中的一半标签都不认识......</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/11/65/13/abb7bfe3.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>馒头小哥</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">15</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">其实语义化更重要的是在于规范，渲染出来的网页是给大多数用户看的。还有一小部分用户比如 程序员、机器人、视障用户。<br><br>如果一个页面只有
                      span 和 div，视障软件如果把这个网页读给用户？ 读 “ div 开始 class="tile" 今天天气很好 div 结束” 还是读 “标题：今天天气很好” 那个方式更好呢？<br><br>就好比家里的排插，有做得精致美观的、也有简约朴素的，但是大家都是遵循统一插座规范，所以都能正常插上家电使用。<br><br>无规矩不成方圆，语义化能更好的帮助到这些用户去读取、去认知、去使用，这是我所理解的语义化好处。</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/11/68/55/5f6b6466.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>Derrickxyz</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">15</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">目前开发的是企业应用，也就是更关注于“软件界面”，没有使用语义化标签。使用div，span等就实现了需求。<br>企业应用不需要做针对性的SEO，也不需要像文章那样分层，划分章节。<br>语义化标签在企业应用中，除了增加可读性外，是否还有其他提升？<br>谢谢～<br></div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/15/03/00/68213ce0.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>雪松</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">11</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">就拿写一个页面来说，直接div/span，让我更加专注页面布局样式内容等信息，如果去语义化，反而造成困扰，不过这个困扰是建立在自己不熟悉语义化的基础之上的。<br>所以我认为应该尽量追求语义化，这不仅是便于浏览器搜索引擎，也是竞争力的一种体现。</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/static/time/img/defaultAvatar.e4ab9fe.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>mfist</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">9</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">1html语义化的优点，有利于人或机器更好的解析语义。<br>2日常业务开发中很多时候只用div
                      span，站在应该走出自己舒适区的角度，应该正确的用语义化<br>3 我觉得在封装项目通用ui组件更需要考究语义化，这样就帮助使用者获取语义化的优点，屏蔽语义化的缺点</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/15/30/4a/bcc3f82a.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>人艰不拆</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-23</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">8</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">老夫写页面就是一把梭，div，div，div，什么都是div，display改一改什么都能写</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/10/04/8d/575cfabd.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>sprinty</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">8</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">语义化标签适合的场景是不是很有限？<br><br>现实开发中除了文档、博客等类型的项目很少用到，我自己也很少用到语义化标签，因为想到其语义就觉得不适合现在的场景。</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/10/5b/25/bff14def.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>北京知府</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">6</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">我们是做业务系统的，团队中有一个同事（纯前端偏UI）特别喜欢使用语义化标签，但是我们在维护他的代码时总感觉他的代码乱糟糟的不好维护，很多样式就直接写标签来定义；而我们其他人（擅长做后台的）则喜欢用div，然后通过有业务含义的class来定义样式。<br>个人觉得做业务系统，特别是团队一起协作开发，还是尽量少用语义化标签，这样能减少后期维护的成本。</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <div class="_2xNIY4NG_0">
                      <p class="_33BLbmw4_0">作者回复: 1. 用语义化标签，跟用标签名选择器是两码事。<br>2. 给自己贴“做业务系统“的标签，潜台词是给自己找借口。<br>3.
                        不要跟没希望的团队一起工作。</p>
                    </div>
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/12/1a/a3/a7da014c.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>Zp</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">6</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">不是该先讲js？</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/15/1f/86/3c836bfe.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>leslee</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">5</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">感觉只有特别适用的场景才能适用语义化标签。工作中的需求太乱了。</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/15/37/68/b37d27f6.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>Mowtwo</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-23</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">4</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">虽然文章确实讲了很多有用的东西，但是对于hgroup的例子我觉得还是可以得到一些指正。<br>至少到目前为止，我尝试了一下，hgroup已经不再可以在网页上有人和作用了...而我搜索以后，也找到了一篇关于hgroup已经在HTML5.1标准下被取消的信息。所以文章中所提出的部分内容已经不再有效，希望重视。</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <div class="_2xNIY4NG_0">
                      <p class="_33BLbmw4_0">作者回复: 我本人比较倾向于WHATWG的living standard，所以保留了这个标签。<br><br>多数语义标签都不会产生实际效果，hgroup针对outline算法仍然有效。</p>
                    </div>
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/0f/a9/58/9324f5cc.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>Artyhacker</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">4</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">以前学习的时候刻意使用过语义化标签，但工作以后直接用react，组件也直接上ant-design，几乎就只需要div和span了。。</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL5ewmOZBuWBYkJt1U9sVvtjBsiaPOSg5nxydh8xiaoricxqxicq8zOOQWQNiaSOaBhDIMibbU39xaduAUA/132"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>无羡</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">4</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">语义开发确实能很好地提升源码的结构，方便阅读。但前提是团队人员都能正确使用语义化标签，否则就会出现div/span和语义标签各种嵌套，很难受</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/15/28/be/6cca0033.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>huayonbryant</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">4</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">几乎不用语义化的开发</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ6k9COgicOM4PQ4KMjib3ib5Lgtkx8iaGR3GHzibatHNSvTyQWQTqiaKF7RuwDoQN0jqg9yyGJzIFH0LQA/132"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>Geek_be7add</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-24</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">3</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">例如「地」「的」「得」、「他」「她」「它」的区分，我觉得不应该因为分不清而不再区分，而是因为它有意义而去刻意地区分，而且也未必都不分，至少每年几百几千万的本科毕业生应该分得清。同理，虽然it行业入门是英雄不问出处，但是也大部分都有一定基础，所以有助于梳理页面结构的语义化概念还是应该大力推行的。</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="http://thirdwx.qlogo.cn/mmopen/vi_32/gvfibNc3Bol6DzLMG5ia9wSLVYseoq326iae7TczmgmBj9u3Jwt8c0hl9KSzY4GNTFn0ic9m1ibzicqJ3aGzeQemec2Q/132"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>hhk</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-23</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">3</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0 _3D2NkqD6_0">我理解的语义化，就是对机器友好对人友好。在富文本这类场景时，我们应该尽量地语义化；写软件界面时，保持整体上的结构化即可</div>
                    <!---->
                    <!---->
                  </div>
                </li>
                <li class="reJj6Thl_0"><img src="https://static001.geekbang.org/account/avatar/00/10/ed/0f/9c572b5e.jpg"
                    class="_2273kGdT_0">
                  <div class="_2CG0SquK_0">
                    <div class="_304R4gla_0">
                      <div>
                        <div class="_18Dng5rT_0"><span>@Listener</span>
                          <!---->
                        </div>
                        <div class="_1H1Z49Dr_0">2019-01-22</div>
                      </div>
                      <div class="_2eMTs2JE_0">
                        <div class="_2P4B1Hdm_0"><i class="iconfont"></i> <span class="">3</span></div>
                        <!---->
                        <!---->
                      </div>
                    </div>
                    <div class="_3M6kV3zb_0">老师，看了之后有几个问题：<br>1.
                      我看到有的语义化文章说的一个页面最好只有一个h1标签，所以一般除了页面的主标题之外通常我都会用h2-h6去做，不知道这样用对不对？<br>2.
                      article和section嵌套的正确使用方式是什么，用于页面布局是不是一般不用article？<br>3. 日常我们的页面都是软件界面类的，是不是没必要用这些复杂的语义化标签？</div>
                    <div class="_2r3UB1GX_0"><span>展开</span><i class="iconfont"></i></div>
                    <div class="_2xNIY4NG_0">
                      <p class="_33BLbmw4_0">作者回复: 1. 显然不对，我已经讲过section了，用section的情况下，只需要h1，此外，页面不一定只有一篇文章，一个主标题。<br>2.
                        仔细看本篇教程<br>3. 没错，我认为完全没有必要</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!---->
        </div>
        <!---->
      </div>
    </div>
    <div class="_2sRsF5RP_0"></div>
  </div>
  <link rel="dns-prefetch" href="//cdn.mathjax.org">
</body>

</html>